通过text-overflow: ellipsis实现省略号截断多行文本

海派程序猿

于 2025-06-27 16:08:10 发布

阅读量131

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS高阶系列讲座--你所不知道的CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_41455464/article/details/148955299

CSS高阶系列讲座--你所不知道的CSS 专栏收录该内容

154 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

那个“…”背后的故事：Text-Overflow: Ellipsis 多行文本截断的艺术

在浩瀚的网页世界里，文字就像海洋里的浪花，连绵不绝，有时汹涌澎湃。但屏幕这块小小的沙滩，终究无法容纳所有的浪花，总有一些文字，注定要被“截断”。

而 text-overflow: ellipsis，就是那个优雅的“截浪者”，它会在文本溢出容器边缘时，用三个小点点“…”告诉你：“这里还有故事，只是藏起来了”。

这三个点，看似简单，却蕴藏着前端开发者们对用户体验的体贴，对设计美学的追求，以及对CSS属性的巧妙运用。今天，我们就来聊聊这三个小点点背后的故事，深入探索 text-overflow: ellipsis 多行文本截断的艺术。

一、初识 Ellipsis：一见钟情式的简单

最开始，text-overflow: ellipsis 只是为了解决单行文本溢出的问题而生的。想象一下，你正在设计一个商品列表，商品名称太长，超出容器宽度，如果直接截断，可能会让用户摸不着头脑。这时候，text-overflow: ellipsis 就派上用场了。

你只需要三行简单的CSS代码：

.single-line-ellipsis {
  width: 200px; /* 容器宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 *

了解本专栏

超级会员免费看