3
A
回答
1
设置line-height
,并且max-height
多重的n行你想展示。例如,如果line-height
是30像素,仅显示2行:
HTML
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
CSS
.text {
line-height: 30px;
max-height: 60px;
overflow: hidden;
}
+0
太简单了!打的好!解决问题!谢谢 – jdawg
0
是的,它很简单,看下面的例子。
HTML:
<div class="i-speak-too-much">
Hello I like speak, I live in the future I am the Universe
</div>
CSS:
.i-speak-too-much {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; //making dots
}
的jsfiddle:https://jsfiddle.net/ot9excbr/
+0
是的,这适用于1行,但想象如果你的文本是7行,你想显示3 .. 文本溢出:省略号打破第一行,是否有可能将其改为第n行? – jdawg
相关问题
- 1. 文本溢出CSS截断
- 2. 多行文本截断
- 3. jQuery通过CSS溢出截断文本
- 4. 如何使用CSS截断文本?
- 5. MySQL用省略号截断文本
- 6. UILabel文本被截断为大字号
- 7. CSS:截断左边的文本,但在截断后保留正确的一个
- 8. 在PHP中截断文本?
- 9. 在TTStyledTextLabel中截断文本
- 10. Django - dumpdata截断为最后n行
- 11. Android TextView文本截断行为
- 12. Excel的多行文本截断
- 13. 更改文本截断行为
- 14. 截断文本的多行NSAttributedString
- 15. CSS在流体图像顶部截断文本
- 16. 动态UILabel截断文本
- 17. IE截断文本右侧
- 18. 截断div内的文本
- 19. 使用linq截断文本
- 20. Multiline mx:文本截断
- 21. PHP截断文本base64
- 22. Rails:智能文本截断
- 23. MySQL文本列被截断
- 24. Android BottomNavigationView截断文本
- 25. ngTable中截断文本
- 26. 我的文本被截断
- 27. 截断Magento的文本
- 28. UILabel被截断的文本
- 29. Swift:UINavigationItem显示截断文本
- 30. BARCHART文本截断问题
检查此[博客] (http://hackingui.com/front-end/a-pure-c ss解决方案为多行文本截断/)和[codepen示例](https://codepen.io/martinwolf/pen/qlFdp) – Venugopal
好贴@Venugopal,似乎正是我一直在寻找! – jdawg