我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。
是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?
这是一个演示。
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。
什么好主意吗?
附注:没有JS解决方案，如果可能的话，纯CSS。
当前回答
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
其他回答
这是一个完全的hack，但它是有效的:
http://jsfiddle.net/2wPNg/
div {
width: 30%;
float: left;
margin-right: 2%;
height: 94px;
overflow: hidden;
position: relative;
}
div:after {
display: block;
content: '...';
width: 1em;
height: 1.5em;
background: #fff;
position: absolute;
bottom: -6px;
right: 0;
}
它确实有问题....它可能会笨拙地切断一个字母，并且在响应式站点上可能会出现一些奇怪的结果。
你可以使用一个溶解的效果代替省略号，纯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>
希望它能帮助到别人。
将两个类组合在一起似乎更优雅。如果只有一行，你可以删除两行类:
.ellipse { white-space: nowrap; display:inline-block; overflow: hidden; text-overflow: ellipsis; } .two-lines { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; } .width{ width:100px; border:1px solid hotpink; } <span class='width ellipse'> some texts some texts some texts some texts some texts some texts some texts </span> <span class='width ellipse two-lines'> some texts some texts some texts some texts some texts some texts some texts </span>
下面是一个使用jQuery管理省略号的简单脚本。 它检查元素的实际高度，并创建一个隐藏的原始节点和一个截断的节点。 当用户单击时，它会在两个版本之间切换。
这样做的最大好处之一是，“省略号”像预期的那样位于最后一个单词附近。
如果你使用纯CSS解决方案，这三个点看起来离最后一个单词很远。
function manageShortMessages() { $('.myLongVerticalText').each(function () { if ($(this)[0].scrollHeight > $(this)[0].clientHeight) $(this).addClass('ellipsis short'); }); $('.myLongVerticalText.ellipsis').each(function () { var original = $(this).clone().addClass('original notruncation').removeClass('short').hide(); $(this).after(original); //debugger; var shortText = ''; shortText = $(this).html().trim().substring(0, 60) + '...'; $(this).html(shortText); }); $('.myLongVerticalText.ellipsis').click(function () { $(this).hide(); if ($(this).hasClass('original')) { $(this).parent().find('.short').show(); } else { $(this).parent().find('.original').show(); } }); } manageShortMessages(); div { border:1px solid red; margin:10px; } div.myLongVerticalText { height:30px; width:450px; } div.myLongVerticalText.ellipsis { cursor:pointer; } div.myLongVerticalText.original { display:inline-block; height:inherit; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="myLongVerticalText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada. Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt. </div> <div class="myLongVerticalText"> One Line Lorem ipsum dolor sit amet. </div> </body>
