文字过长显示省略号或显示截取的效果

vivk2017

已于 2024-04-22 11:00:48 修改

阅读量268

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端

于 2022-03-22 15:56:13 首次发布

本文链接：https://blog.csdn.net/m0_38109616/article/details/123663106

css 专栏收录该内容

13 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

通过CSS样式text-overflow: ellipsis配合overflow: hidden和white-space: nowrap，可以实现文字过长时显示省略号的效果。此外，还可以使用display: -webkit-box, -webkit-line-clamp和-webkit-box-orient属性限制显示的行数，从而达到截取文本的目的。" 130546558,10806117,Cesium卫星动态遮罩实现,"['cesium', '前端开发', 'javascript']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;

【说明：】
text-overflow：表示当文本溢出时是否显示省略标记，ellipsis表示省略号效果，clip 表示截取的效果。
overflow:hidden; 将文本溢出的内容隐藏。
white-space:nowrap; 是禁止文字换行。
width：（可选）可以写固定值，也可以根据宽度自适应显示效果。

第二种：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;