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