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

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

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

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

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

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

如果有人试图让线夹在flexbox中工作，那就有点棘手了——特别是当您使用非常长的单词进行折磨测试时。这段代码片段中唯一真正的区别是min-width: 0;在包含截断文本的伸缩项中，以及换行:断字;。向https://css-tricks.com/flexbox-truncated-text/致敬。免责声明:在写这个答案的时候，Chrome以外的浏览器支持很差。然而，从那时起，情况可能有所改善。

.flex-parent { display: flex; } .short-and-fixed { width: 30px; height: 30px; background: lightgreen; } .long-and-truncated { margin: 0 20px; flex: 1; min-width: 0;/* Important for long words! */ } .long-and-truncated span { display: inline; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word;/* Important for long words! */ } <div class="flex-parent"> <div class="flex-child short-and-fixed"> </div> <div class="flex-child long-and-truncated"> <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span> </div> <div class="flex-child short-and-fixed"> </div> </div>

http://codepen.io/AlgeoMA/pen/JNvJdx (codeen版本)

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

$clamp(myHeader, {clamp: 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>