为了显示新闻标题列表,我需要一个固定div
的{{1}}。
如果文本溢出了div,那么max-height
应该切断文本,并在切断的情况下以省略号结束...
div
#lipsum {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 75px;
height: 75px;
width: 100%;
}
我的问题是,如果只有一行,现有的行为就行了,但我不需要一个符号行,而是需要多行文本,直到最大<div id="lipsum">
<p>
Duis eget sapien leo. Vivamus dignissim elit eget enim varius, vel condimentum tellus sodales. Vestibulum scelerisque lectus at mauris elementum finibus. Ut enim risus, venenatis sagittis mi ac, facilisis lacinia nunc. Nam ornare urna tortor, a vehicula nisl facilisis quis. Etiam enim sem, ornare a hendrerit et, convallis id quam. Ut tincidunt facilisis tincidunt. Mauris sodales euismod orci, a tincidunt massa fermentum sed. Mauris odio quam, auctor ac viverra vitae, condimentum feugiat mauris. Phasellus fermentum velit sit amet orci interdum dignissim. Praesent venenatis aliquet magna, at hendrerit felis condimentum maximus. Fusce cursus, nulla at suscipit iaculis, magna odio bibendum arcu, a tincidunt diam sapien sit amet nisl. Nullam non risus et metus tempus finibus tempus in libero. Maecenas auctor eget mauris non malesuada. Quisque erat tellus, facilisis quis mauris quis, lacinia tristique orci. Suspendisse dignissim nibh et mi consequat venenatis.
</p>
</div>
。 ..
答案 0 :(得分:0)
您可能需要参考以下帖子:
With CSS, use "..." for overflowed block of multi-lines
看起来有人也发表了一篇关于这个主题的文章。虽然,解决方案似乎与问题有点相关:
https://css-tricks.com/line-clampin/
最后,这是一个.js解决方案:
Insert ellipsis (...) into HTML tag if content too wide
编辑:要添加到此资源列表,这是一个纯css解决方案。
http://codepen.io/martinwolf/pen/qlFdp
*请注意,每个浏览器都不支持text-overflow:ellipsis;
。
最后,这是问题的.js解决方案:
答案 1 :(得分:0)
不幸的是,我认为用这种方法无法实现目标。根据{{3}},“此属性仅影响在其内联进度方向上溢出块容器元素的内容(例如,不会在框底部溢出文本)。”。
因此,正如其他答案中所述,除非考虑到并非每个浏览器都支持此类CSS3指令,否则无法使用CSS 进行此操作。如果你计划一个更通用的(传统的?)解决方案来克服兼容性问题,假设你已经有了标题,假设长度很短,你可以预先处理并以类似Wordpress的方式呈现它们。您可以查看this source。