css单行文本溢出显示省略号

Let dreams fly

于 2018-05-22 10:39:55 发布

阅读量518

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css单行文本溢出显示省略号单行文本溢出 css单行文本溢出

本文链接：https://blog.youkuaiyun.com/weixin_40687883/article/details/80393382

css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用CSS实现单行文本溢出时显示省略号的效果，通过设置特定属性，可以优雅地处理文本超出容器宽度的情况。

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

css单行文本溢出显示省略号

1.css

.text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

2.html

<div class="text">requirejs能带来什么好处requirejs能带来什么好处requirejs能带来什么好处</div>

效果：