文本溢出后隐藏转成省略号

最新推荐文章于 2024-03-12 13:07:22 发布

原创最新推荐文章于 2024-03-12 13:07:22 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS属性white-space, overflow和text-overflow来处理文本溢出的情况，包括文本在一行或多行内显示，并在溢出时自动转换为省略号的方法。

1.文本在一行内显示，溢出后自动转成省略号。

white-space:nowrap ;  (文本在一行内显示)
overflow:hidden ;  (溢出部分隐藏)
text-overflow:ellipsis;   (溢出部分转成省略号)

2.文本在多行内显示，溢出后隐藏自动转为省略号。

overflow:hidden ;  (溢出部分隐藏)
text-overflow:ellipsis;   (溢出部分转成省略号)
display:-webkit-box; (将容器作为弹性盒子显示)
-webkit-box-orient:vertical;(从上到下垂直排列子元素)
-webkit-line-clamp:2;(表示文本要显示的行数)