logo标签列表

多行文本溢出

css
5
我需要根据文本的高度而不是长度来裁剪文本。我有以下代码：


<div style="width:100px; height:100px; overflow:hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec lacus at felis malesuada hendrerit. Pellentesque et leo venenatis nulla feugiat bibendum. Ut pretium porta massa, vitae interdum nulla ultrices et. Etiam ut erat id magna interdum consequat. Curabitur ornare sodales metus quis egestas. Donec odio est, hendrerit vel vehicula ut, scelerisque ac tortor. Curabitur risus neque, viverra vitae dapibus vitae, vulputate vitae est
</div>

这段代码将显示一个带有隐藏文本的正方形。我需要隐藏溢出的文本，但在可见文本的末尾，应该显示省略号（“...”）。

使用text-overflow属性的问题在于，它仅适用于word-wrap: none; - 只适用于一行文本。

2个回答
0

我还没有测试过，但我认为这应该可以工作：

    <div style="width:100px; height:100px; overflow:hidden;"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec lacus at felis malesuada hendrerit. Pellentesque et leo venenatis nulla feugiat bibendum. Ut pretium porta massa, vitae interdum nulla ultrices et. Etiam ut erat id magna interdum consequat. Curabitur ornare sodales metus quis egestas. Donec odio est, hendrerit vel vehicula ut, scelerisque ac tortor. Curabitur risus neque, viverra vitae dapibus vitae, vulputate vitae est 

    <div class="ellipsis">...</div>    
    </div>

.ellipsis
{
vertical-align: text-bottom;
float: right;
}
不幸的是，这并不起作用。省略号在右侧，但“垂直对齐”不像预期的那样起作用。 - tomasbedrich
只需为.ellipsis添加margin-top或其他属性即可。 - Xodarap
@Xodarap 我也尝试过这个方法，但它会在省略号上方产生空白条纹，因为该元素保留了此空间用于其边距。 - tomasbedrich
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接