当前位置：首页 > 文章列表 > 文章 > 前端 > CSS文本溢出？优雅省略号显示技巧(单行&多行)

CSS文本溢出？优雅省略号显示技巧(单行&多行)

2025-03-05 08:39:24 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

本文详解CSS文本溢出处理技巧，教你如何优雅地用省略号(...)代替超出容器的单行或多行文本。针对单行文本，通过`overflow: hidden; white-space: nowrap; text-overflow: ellipsis;` 完美实现省略号显示；对于多行文本，则利用`-webkit-box`系列属性（包括`-webkit-line-clamp`）控制显示行数并添加省略号，有效解决页面布局问题，提升用户体验。文章附带代码示例，助你快速掌握单行和多行文本溢出的CSS解决方案。

CSS文本溢出如何优雅处理：单行和多行文本的省略号显示方法？

巧用CSS，完美解决文本溢出难题！

本文将深入探讨如何利用CSS高效处理元素内容溢出问题。许多情况下，文本内容超出容器尺寸会影响页面布局美观。我们将通过代码示例，讲解如何优雅地显示文本，并用省略号(...)代替溢出部分。

示例：一个

元素内容超出预设宽度：
<div class="box-container py-5">
  <div class="content">
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
  </div>
</div>
#demo .content {
  width: 300px;
  border: 1px solid red;
}
上述
内容过长，超过了预设的300像素宽度。我们需要将其内容限制在容器内，并用省略号表示溢出部分。  以下提供两种CSS解决方案：
一、单行文本溢出省略号：
处理单行文本溢出，使用以下CSS代码：
.content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
overflow: hidden; 隐藏溢出内容； white-space: nowrap;  防止文本换行； text-overflow: ellipsis; 在文本末尾显示省略号。
二、多行文本溢出省略号：
处理多行文本溢出，可以使用以下CSS代码：
.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 设置省略号之前的行数 */
  overflow: hidden;
}
此代码利用 -webkit-box、-webkit-box-orient 和 -webkit-line-clamp 属性实现多行文本省略号显示。 -webkit-line-clamp 指定显示的行数，超出部分将被省略并显示省略号。  请注意，这是一个WebKit私有属性，主要适用于Chrome和Safari浏览器。
通过以上方法，您可以根据实际情况选择合适的CSS代码处理文本溢出，提升页面美观度和用户体验。
今天关于《CSS文本溢出？优雅省略号显示技巧(单行&多行)》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！