前端，文本内容太长，一行显示不下，用省略号...代替

最新推荐文章于 2025-02-21 16:19:41 发布

原创最新推荐文章于 2025-02-21 16:19:41 发布 · 5.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文详细介绍了前端开发中如何利用white-space、text-overflow和overflow三个CSS属性实现文本内容过长时的省略显示。通过设置white-space为nowrap以防止文本换行，text-overflow为ellipsis展示省略号，overflow为hidden隐藏多余内容，可以优雅地处理一行文本显示不下时的情况。示例代码展示了具体应用，并对比了text-overflow为clip时的效果。此外，还深入解析了这三个属性的含义和常用取值。

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

一、用到的三个属性

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

三个属性配合使用：

空白符不换行 nowrap，在同一行继续显示；
文本溢出包含元素时，显示省略号 ellipsis 来代表被修剪的文本；
将溢出的文本内容隐藏 hidden

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>this is my Title</title>
	<style>
		.divBox{
			max-width: 200px;
			border: 1px solid red;

			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="divBox">绿媒发现：28名台湾艺人十一祝“祖国生日快乐”，“双十”全噤声</div>
</body>
</html>

效果如图：
在这里插入图片描述
text-overflow: clip的效果：文本结尾很突兀

二、三个属性详解

1. white-space 属性

white-space 属性设置如何处理文本中的空白符

空白符：空格符，制表符，换行符的统称

空格符：它不等同于键盘上的 space 键，在键盘上是没有的。它不是空格，但是能起到空格的效果，并占用一个字符位置。在计算机中，空格符号有它自己的表示方式，一般是用\O表示。

制表符：也叫制表位，功能是在不使用表格的情况下在垂直方向按列对齐文本。比较常见的应用包括名单、简单列表等。也可以应用于制作页眉页脚等同一行有几个对齐位置的行。

换行符：符号 \n ，使得光标下移一格。

white-space 属性的取值：

normal：默认值，空白会被浏览器忽略。
pre：空白会被浏览器保留，其行为方式类似 HTML 中的 <pre> 标签。
nowrap：文本不会换行，在同一行上继续，直到遇到 <br> 标签为止。

2. text-overflow 属性

text-overflow 属性规定当文本溢出包含元素（如div、p）时发生的事情。取值如下：

clip：修剪文本。能显示多少就显示多少，显示不了的隐藏。结尾处很突兀。
ellipsis：显示省略符号...来代表被修剪的文本。符合人们的常识和习惯，结尾看起来也和谐。
string：使用给定的字符串来代表被修剪的文本。

3. overflow 属性

overflow 属性定义溢出元素内容区的内容会如何处理。取值如下：

visible：默认值。可见，内容不会被修剪，会呈现在元素框之外。
hidden：隐藏，内容会被修剪，并且其余内容是不可见的。
scroll：滚动，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。