CSS中关于文本溢出部分用省略号显示

最新推荐文章于 2025-05-16 09:48:22 发布

原创最新推荐文章于 2025-05-16 09:48:22 发布 · 399 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

当前文章被收录于：

css

6 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

博客介绍了日常排版中处理溢出容器文本的方法。对于单行文本，加入三个CSS属性即可处理；多行文本处理的CSS方法仅对webkit内核有效。若考虑浏览器兼容性问题，可使用JS实现。

在日常排版中我们经常会为了不影响排版布局而将溢出容器的文本用省略号代替。

单行文本处理

单行处理比较简单，只需要加入三个css属性就行。

html

<p>这是一行貌似很长很长的测试文本</p>

css

p{color: #666;width: 100px;background: #ff0;}	/*容器必须有明确的宽度*/

/*核心代码*/
p{
	overflow: hidden;				/*设置文本溢出部分的显示方式*/
	text-overflow: ellipsis;		/*规定当文本溢出时显示省略符号来代表被修剪的文本*/
	white-space: nowrap;			/*文本不换行*/
}

效果
在这里插入图片描述

多行文本处理

html

<p>这是一行貌似很长很长的测试文本</p>

css（只有webkit内核才有作用）

p{color: #666;width: 100px;background: #ff0;}

/*核心代码*/
p{
	display: -webkit-box;					/*将对象作为弹性伸缩盒子模型显示*/
	-webkit-box-orient: vertical;			/*设置或检索伸缩盒对象的子元素的排列方式*/
	-webkit-line-clamp: 2;					/*用来限制在一个块元素显示的文本的行数*/
	overflow: hidden;
}