利用CSS让溢出文本省略号，展现页面简洁之美

2023-05-25 14:20:07

超越边界：巧用 Overflow 和 Text-overflow 属性，让溢出文本优雅隐藏

对于网页排版来说，文本溢出一直是一个让人头疼的问题。它会破坏布局，让页面显得凌乱不堪。不过，别担心！Overflow 和 Text-overflow 属性组合起来，将为你提供一种简洁高效的解决方案，让你轻松掌控文本溢出，展现页面设计的优雅与美观。

Overflow 属性：掌控文本的去向

Overflow 属性就像一个交通指挥，它决定了当元素的内容超出其边界时，该采取何种行动。它有四种取值，分别是：

hidden： 隐藏溢出部分，让它消失不见。
scroll： 在元素内部显示滚动条，允许用户滚动查看隐藏的内容。
auto： 浏览器根据内容自动选择是否显示滚动条。
visible： 允许元素的内容溢出显示，不受任何限制。

选择合适的 Overflow 属性值，可以控制溢出文本的显示方式，是隐藏还是滚动，一切都由你决定。

Text-overflow 属性：让省略号闪亮登场

当文本溢出被隐藏后，如何让用户知道还有更多内容呢？Text-overflow 属性就派上了用场。它提供了四种取值：

clip： 溢出文本被简单地裁剪，不再显示。
ellipsis： 溢出文本被替换为省略号。
fade： 溢出文本逐渐淡出，直至消失。
none： 不处理溢出文本，默认行为。

通过使用 Text-overflow 属性，你可以决定溢出文本的处理方式。省略号是一个既简洁又直观的提示，告诉用户还有更多内容可以探索。

实战演练：让文本在 div 中优雅省略

理论讲完了，现在让我们用代码实战一下。下面这段 CSS 代码展示了如何使用 Overflow 和 Text-overflow 属性，让文本在 div 中优雅省略：

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.text {
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在这个例子中，.container 类设置了一个固定大小的 div，并将其溢出内容隐藏。.text 类设置了文本大小和省略号，并通过 white-space: nowrap; 属性确保文本不会换行。

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rutrum. Donec eget dignissim diam, sit amet eleifend risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Suspendisse potenti.
  </p>
</div>

当我们使用这段 HTML 代码填充 .text 类时，你会看到长长的文本被限制在了 div 中，超出部分被省略号代替，呈现出一种简约而美观的视觉效果。