纯css方式用省略号修饰多行文本

调整文本容器的高度， 用-webkit-line-clamp控制断线:2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这应该在webkit浏览器中工作:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

浏览器支持

div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } * { font-family: verdana; } <div> The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end. </div>

它是一个非标准的CSS，当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。

太遗憾了，你不能让它工作超过两行!如果元素是显示块，高度设置为2em或其他，当文本溢出时，它会显示省略号，那就太棒了!

对于单个眼线，您可以使用:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

对于多行，也许你可以使用Polyfill，如jQuery autoellipsis，这是在github http://pvdspek.github.com/jquery.autoellipsis/上

如果有人正在使用SASS/SCSS，并偶然发现了这个问题-也许这个mixin可以帮助:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

这只在webkit浏览器中添加省略号。休息只是把它切断了。

我找到了一个解决方案，但你需要知道一个粗略的字符长度，将适合你的文本区域，然后加入一个…到前面的空格。

我是这样做的:

假设一个粗略的字符长度(在本例中为200)并传递给a 与你的文本一起发挥作用 分隔空格，这样你就有了一根长字符串 使用jQuery来切片字符后的第一个“”空格 长度 加入剩下的…

代码:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

这里有一个小提琴- http://jsfiddle.net/GYsW6/1/