我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。
是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?
这是一个演示。
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。
什么好主意吗?
附注:没有JS解决方案，如果可能的话，纯CSS。
当前回答
这是适合我的解决方案，因为我知道每个人想要的结果可能不同。
display: -webkit-box;
min-height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625; /* as per desire */
其他回答
不知道你的目标是什么，但是你想让文本出现在第二行吗?
这是你的jsFiddle: http://jsfiddle.net/8kvWX/4/刚刚删除以下:
white-space:nowrap;
我不确定这是否是你想要的。
问候,
Mee
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
对于那些在scss中工作的人，你需要在注释的开头添加!autoprefixer，这样它就会为postcss保留:
我遇到了这个问题，这就是为什么把它贴在这里
line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
参考
如果上面没有工作，使用这个
display: -webkit-box;
max-width: 100%;
margin: 0 auto;
-webkit-line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
下面的Css应该可以做到。
在第二行之后，文本将包含…
line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
