HTML文本溢出用省略号显示

最新推荐文章于 2025-06-10 12:41:12 发布

原创最新推荐文章于 2025-06-10 12:41:12 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

html/css笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了CSS中处理单行和多行文本溢出的方法，包括使用`white-space`, `overflow`, `text-overflow`属性来实现文字强制显示在一行内并隐藏多余部分，以及通过`-webkit-line-clamp`和`-webkit-box`来实现多行文本的省略号显示。需要注意的是，多行文本的省略号方案在某些浏览器中可能存在兼容性问题，适用于WebKit浏览器或移动端。

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

1. 单行文本溢出处理方式

	/*强制文字一行内显示*/
	white-space: nowrap;
	/*溢出部分隐藏起来*/
	overflow: hidden;
	/*文本溢出时用省略号来显示*/
	text-overflow: ellipsis;

2. 多行文本溢出处理方式

	overflow: hidden;
	text-overflow: ellipsis;
	/*弹性伸缩盒子模型显示*/
	display: -webkit-box;
	/*限制在一个块元素显示文本的行数*/
	-webkit-line-clamp: 2;/*2行*/
	/*设置或检索伸缩盒对象子元素的排列方式*/
	-webkit-box-orient: vertical;