我将这些css属性用于行省略号

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

-webkit-line-clamp: 3;是在…之后的行数(3行)所示。

我将这些css属性用于行省略号

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

-webkit-line-clamp: 3;是在…之后的行数(3行)所示。

这应该在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>

迟回复，但一个html换行也可以，所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法，但如果你用br打断了注释，text-overflow省略号将从html文本的下一行开始。

没有简单的方法。使用clip .js库。

$clamp(myHeader, {clamp: 3});

我不是一个JS专业人士，但我想出了一些方法，你可以这样做。

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

然后使用jQuery将其截断为特定的字符数，但最后一个单词像这样:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

结果如下所示:

我爱你，我爱你，我爱你。发病原因 基本结果tortor et…

或者，你可以像这样简单地截断它到一个特定的字符数:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

结果如下所示:

我爱你，我爱你，我爱你。发病原因 结果元素，tortoret euismod…

希望这能有所帮助。

这是jsFiddle。