CSS文本溢出如何优雅处理：单行和多行文本的省略号显示方法？-css教程-PHP中文网

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

霞舞

发布： 2025-03-01 12:36:10

原创

762人浏览过

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文本溢出如何优雅处理：单行和多行文本的省略号显示方法？的详细内容，更多请关注php中文网其它相关文章！