多行文本溢出

Question

我需要修剪一些文字而不是它的长度,而是它的高度.我有这个:

<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属性的问题是,它只适用于world-wrap: none;- 只有一行文本.

Answer 1

我还没有测试过，但我认为这会起作用：

    <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;
}