让文字不再拥挤，溢出隐藏才是真王道！
2023-06-03 16:09:20
使用 CSS 巧妙地控制文本溢出：隐藏并显示省略号
在网页设计中，管理文本溢出至关重要，因为它有助于确保内容整洁且信息丰富。本文将探讨如何使用 CSS 的 overflow 和 text-overflow 属性巧妙地控制文本溢出，让溢出的文本在屏幕上优雅地隐藏并显示省略号。
控制溢出行为：overflow 属性
overflow 属性定义了当内容超出其容器边界时如何显示。它有多种值，包括：
- visible： 允许内容超出容器边界
- hidden： 隐藏超出容器边界的文本
- scroll： 在容器内显示滚动条以滚动到隐藏的内容
管理溢出文本：text-overflow 属性
text-overflow 属性进一步控制溢出文本的行为。它定义了当文本超出容器边界时在文本末尾显示什么。其值包括：
- clip： 剪切超出容器边界的文本
- ellipsis： 在文本末尾显示省略号 (...)
- none： 不显示任何内容
实现单行文本溢出隐藏
对于单行文本，我们可以使用以下 CSS 代码实现溢出隐藏并显示省略号：
.single-line-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
overflow: hidden;隐藏超出容器边界的文本。text-overflow: ellipsis;在文本末尾显示省略号。white-space: nowrap;防止文本换行。
实现多行文本溢出隐藏
对于多行文本，我们可以使用以下 CSS 代码实现溢出隐藏并显示省略号：
.multi-line-text {
overflow: hidden;
text-overflow: ellipsis;
}
overflow: hidden;隐藏超出容器边界的文本。text-overflow: ellipsis;在文本末尾显示省略号。
示例：单行文本与多行文本溢出
考虑以下 HTML 示例：
<div class="single-line-text">
这是单行文本，它会在溢出时隐藏并显示省略号。
</div>
<div class="multi-line-text">
这是多行文本，它会在溢出时隐藏并显示省略号。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare nisi. Fusce lobortis tristique nisl. Sed laoreet vulputate lacus, vitae finibus felis sollicitudin eu. Donec sed dignissim quam. Aenean gravida est non lacus luctus, a finibus eros bibendum. Donec sit amet ultrices tortor. Proin vestibulum venenatis mauris, non congue neque posuere vitae. Donec accumsan vestibulum ipsum, at egestas felis efficitur eu. Mauris faucibus ac lorem ac ornare. Nunc egestas ante nec augue posuere, in accumsan augue tempus. Phasellus elementum sapien ac purus bibendum, vitae gravida lorem maximus.
</div>
应用 CSS 代码后，单行文本将根据容器宽度截断并在末尾显示省略号，而多行文本将被限制在容器内，超出容器的部分将被隐藏并在末尾显示省略号。
结论
使用 CSS 的 overflow 和 text-overflow 属性，您可以轻松地控制文本溢出，并让文本在溢出时优雅地隐藏并显示省略号。这将有助于您创建整洁且信息丰富的网页布局。
常见问题解答
-
overflow 属性有哪些其他值？
除了本文中讨论的值之外，
overflow属性还有scroll和auto值，分别用于显示滚动条和自动决定是否显示滚动条。 -
我可以使用
text-overflow属性控制省略号的样式吗？不可以，
text-overflow属性不提供控制省略号样式的选项。 -
为什么我的文本在 overflow: hidden; 时不显示省略号？
确保您也应用了
text-overflow: ellipsis;，因为它负责在文本末尾显示省略号。 -
如何让多行文本换行并在溢出时隐藏？
您可以使用
overflow-wrap: break-word;来让文本在单词边界换行，并使用overflow: hidden;来隐藏溢出的文本。 -
如何在 CSS 中隐藏文本而不仅仅是剪切它？
您可以使用
visibility: hidden;来隐藏文本而不剪切它。它将保留文本在文档流中的位置，但使其不可见。
