css 实现单行或者多行超出后显示...

最新推荐文章于 2025-05-13 17:37:39 发布

原创最新推荐文章于 2025-05-13 17:37:39 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

本文介绍如何使用CSS实现文本的单行或多行截断并以省略号显示超出部分的方法。针对不同需求提供了两种方案：一种适用于单行文本截断，另一种则适用于多行文本截断。

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

1.单行多处后显示...

css

<span style="font-size:18px;">.demo-p{
	width: 200px;
	font-size: 20px;
	<em>overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;</em>
}</span>

html

<span style="font-size:24px;"><p class="demo-p">我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦</p></span>

2.多行多处后显示...

css:

<span style="font-size:24px;">.demo-p1{
	width: 200px;
	font-size: 20px;
	<em>display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;</em>
}</span>

html:

<span style="font-size:24px;"> <p class="demo-p1">我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦</p></span>

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。