CSS 文本排版属性详解：text-overflow 和 white-space
在网页设计中，文本排版是一个非常重要的环节，通过合理的排版可以使文本更易读、更美观。CSS 提供了一些属性来控制文本的显示方式，其中包括 text-overflow 和 white-space。本文将详细介绍这两个属性的用法和示例代码。
一、text-overflow 属性
text-overflow 属性用于控制当文本超出容器时的显示方式。常见的取值有以下几种：
立即学习“前端免费学习笔记（深入）”；
- clip：默认值，超出容器的部分将被裁剪。
- ellipsis：超出容器的部分将以省略号（...）显示。
- string：可以自定义显示的字符串。
下面是示例代码：
<style>
.container {
width: 200px;
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出容器部分隐藏 */
text-overflow: ellipsis; /* 超出部分以省略号显示 */
}
</style>
<div class="container">
This is a long text that should be truncated with an ellipsis when it overflows.
</div>在上面的代码中，我们使用了一个容器，并设置了宽度为 200px，文本内容为一个长句子。通过设置 white-space 属性为 nowrap，表示强制不换行，overflow 属性为 hidden，表示超出容器的部分隐藏。最重要的是 text-overflow 属性，我们将其设置为 ellipsis，表示超出部分以省略号显示。
二、white-space 属性
white-space 属性用于控制文本的空白符处理方式。常见的取值有以下几种：
- normal：默认值，自动处理空白符，合并连续的空白符为一个空格，换行符和制表符也被当作空格处理。
- nowrap：强制不换行，合并连续的空白符为一个空格。
- pre：保留原始的空白符，保持文本的空白符格式。
- pre-wrap：保留原始的空白符，允许换行，文本将按照原始格式显示。
- pre-line：自动处理空白符，但保留换行符，允许换行，文本将按照原始格式显示。
下面是示例代码：
<style>
.container {
white-space: pre-wrap; /* 保留原始的空白符，允许换行 */
}
</style>
<div class="container">
This is a long text that should wrap when it reaches the container's width.
</div>在上面的代码中，我们使用了一个容器，并设置了 white-space 属性为 pre-wrap，这样文本将保留原始的空白符，允许换行。
通过使用 text-overflow 和 white-space 这两个属性，我们可以更加灵活地控制文本的排版，使其更美观、更易读。在实际的网页设计中，我们可以根据需要选择合适的取值，并根据示例代码进行调试。
总结：
text-overflow 和 white-space 是 CSS 中用于控制文本排版的属性。text-overflow 用于控制当文本超出容器时的显示方式，常见的取值有 clip、ellipsis 和 string；white-space 用于控制文本的空白符处理方式，常见的取值有 normal、nowrap、pre、pre-wrap 和 pre-line。通过合理应用这两个属性，我们可以达到更好的文本排版效果。
