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

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

霞舞

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

原创

927人浏览过

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

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

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

示例：一个<div>元素内容超出预设宽度： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="box-container py-5"> <div class="content"> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest </div> </div></pre>

登录后复制

</div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">#demo .content {
  width: 300px;
  border: 1px solid red;
}</pre>登录后复制</div>
<p>上述<code><div>内容过长，超过了预设的300像素宽度。我们需要将其内容限制在容器内，并用省略号表示溢出部分。  以下提供两种CSS解决方案：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p><strong>一、单行文本溢出省略号：</strong></p>
<p>处理单行文本溢出，使用以下CSS代码：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}</pre>登录后复制</div>
<p><code>overflow: hidden;

隐藏溢出内容； white-space: nowrap; 防止文本换行； text-overflow: ellipsis; 在文本末尾显示省略号。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

二、多行文本溢出省略号：

处理多行文本溢出，可以使用以下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代码处理文本溢出，提升页面美观度和用户体验。