我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。
是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?
这是一个演示。
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。
什么好主意吗?
附注:没有JS解决方案，如果可能的话，纯CSS。
当前回答
限制为少数行几乎在所有浏览器中都可以工作，但省略号(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属性可以做到这一点。下面是一个三行省略号。
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
不知道你的目标是什么，但是你想让文本出现在第二行吗?
这是你的jsFiddle: http://jsfiddle.net/8kvWX/4/刚刚删除以下:
white-space:nowrap;
我不确定这是否是你想要的。
问候,
Mee
你可以使用一个溶解的效果代替省略号，纯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>
这里我假设你的背景颜色是白色。
在我的angular应用程序中，下面的风格为我实现了对第二行文本溢出的省略号:
<div style="height:45px; overflow: hidden; position: relative;">
<span class=" block h6 font-semibold clear" style="overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 20px; /* fallback */
max-height: 40px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;">
{{ event?.name}} </span>
</div>
希望它能帮助到别人。
限制为少数行几乎在所有浏览器中都可以工作，但省略号(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;
}
