我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。
是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?
这是一个演示。
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。
什么好主意吗?
附注:没有JS解决方案，如果可能的话，纯CSS。
当前回答
对于那些在scss中工作的人，你需要在注释的开头添加!autoprefixer，这样它就会为postcss保留:
我遇到了这个问题，这就是为什么把它贴在这里
line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
参考
其他回答
限制为少数行几乎在所有浏览器中都可以工作，但省略号(3点)将不会在Firefox和IE中显示。演示- http://jsfiddle.net/ahzo4b91/1/
div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
看看这个纯css版本:http://codepen.io/martinwolf/pen/qlFdp
h2 { 显示:-webkit-box; max-width: 400 px; -webkit-line-clamp: 2; -webkit-box-orient:垂直; 溢出:隐藏; 文本溢出:省略; ｝ <h2> .</h2> .</h2> .</h2> .</h2> .</h2> .</h2> .
你可以使用一个溶解的效果代替省略号，纯CSS，看起来更专业:
<div style="width: 293px; height:48px; overflow: hidden; ">
More than two line of text goes here-More than two line of text goes here
</div>
<div style="position: relative; top: -24px; width: 293px; height:24px;
background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
</div>
这里我假设你的背景颜色是白色。
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 36px;
max-height: 18px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
我发现了一个线夹和线高的组合:D
不知道你的目标是什么，但是你想让文本出现在第二行吗?
这是你的jsFiddle: http://jsfiddle.net/8kvWX/4/刚刚删除以下:
white-space:nowrap;
我不确定这是否是你想要的。
问候,
Mee
