文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？

小猫娃来啦

已于 2023-03-03 08:48:47 修改

阅读量4k

点赞数 8

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

于 2022-12-06 10:24:52 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/128197065

版权

css 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

相信大家依稀记得有个东西叫text-overflow: ellipsis;是文本超出部分，以省略号形式表示的一个属性。

但是，我也相信大家单单用了这个东西之后，并没有什么效果。

为什么？

因为 text-overflow: ellipsis; 并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，就需要给 text-overflow: ellipsis; 配上两个个额外的属性：overflow 和 white-space。

以以下代码为例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				width: 500px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			
		</style>
	</head>
	<body>
		<div>爱学习的Akali king爱学习的Akali king爱学习的Akali king爱学习的Akali king爱学习的Akali king爱学习的Akali king</div>
	</body>
</html>

效果图：

值得一提的是，这个div如果给他设置高度，不管设置多少，从文本省略的显示角度来说，是无效的。因为以上方法，针对的仅仅是单行文本省略。

如果要实现多行文本省略，请继续往下看：

实现多行文本省略，同样的，我们需要用text-overflow: ellipsis; 配合overflow，display，

-webkit-line-clamp，-webkit-box-orient使用。

以以下代码为例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				width: 500px;
				text-indent: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 5;
				-webkit-box-orient: vertical;
			}
			
		</style>
	</head>
	<body>
		<div>我深信世界上恐怕没有可以描写得出我现在心中悲痛的一支笔。不要说我自己这支轻易也不能动的一支。可是除此之外我更无可以泄我满怀伤怨的心的机会了，我希望摩的灵魂也来帮我一帮，苍天给我这一霹雳直打得我满身麻木得连哭都哭不出来，浑身只是一阵阵的麻木。几日的昏沉直到今天才清醒过来，知道你是真的与我永别了。摩！漫说是你，就怕是苍天也不能知道我现在心中是如何地疼痛，如何地悲伤！从前听人说起“心痛”，我老笑他们虚伪，我想人的心怎会觉得痛，这不过说说而已，谁知道我今天才真的尝到这一阵阵心中绞痛似的味儿了。</div>
	</body>
</html>

效果图：

小结：

-webkit-line-clamp: 5;                     表示显示5行

-webkit-box-orient: vertical;           从上到下垂直排列子元素

display: -webkit-box;                      将对象作为弹性盒子模型显示。

white-space: nowrap;                     溢出不换行

text-overflow: ellipsis;                    文本溢出用省略号表示

overflow：hidden；                         溢出隐藏

小猫娃来啦

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
2
评论
文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？

因为 text-overflow: ellipsis; 并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，就需要给 text-overflow: ellipsis; 配上两个个额外的属性：overflow 和 white-space。以以下代码为例：效果图：值得一提的是，这个div如果给他设置高度，不管设置多少，从文本省略的显示角度来说，是无效的。因为以上方法，针对的仅仅是单行文本省略。如果要实现多行文本省略，请继续往下看：实现多行文本省略，同样的，我们需要用text-overflow: e
复制链接

扫一扫