8.1 text-overflow 属性
控制文字显示和环绕是网页设计中的重要方面，尤其是在处理长文本行或大小受限的容器时。属性 text-overflow，white-space 和 word-wrap（现在被称为 overflow-wrap）让你可以控制在这种情况下文字的行为。
属性 text-overflow 管理的是超出容器边界的文字显示。它通常与 white-space 和 overflow 属性一起使用，来创建裁剪文字并添加省略号的效果。
值：
clip: 裁剪超出容器边界的文字ellipsis: 在裁剪的文字末尾添加省略号 (...)
用法示例：
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
HTML
<body>
<div class="container clip">这个文字会被裁剪到容器边界。</div>
<div class="container ellipsis">这个文字会被裁剪并替换为省略号。</div>
</body>
8.2 white-space 属性
属性 white-space 控制空白符号的处理和文字的换行。它允许你定义空格、制表符和换行符在文本中的处理方式。
值：
normal: 空格和换行符正常处理（默认）nowrap: 文本显示在一行，不换行pre: 空格和换行符会被保留，就像在 HTML 标签<pre>中一样pre-wrap: 空格和换行符被保留，但文本可以根据需要换行pre-line: 换行符被保留，而空格按通常方式处理break-spaces: 空格和换行符保留，长空格可能会导致换行
用法示例：
CSS
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
HTML
<body>
<div class="normal">若空间不足，这个文本会被换行。</div>
<div class="nowrap">这个文本不会换行，会在一行显示。</div>
<div class="pre">
这个文本 会保留
所有的空格和换行。
</div>
<div class="pre-wrap">
这个文本会换行，但也会保留
所有的空格和换行。
</div>
</body>
8.3 overflow-wrap 属性
属性 overflow-wrap（之前称为 word-wrap）控制超出容器边界的单词的换行。它帮助你避免因为长词无法拆分而导致容器溢出。
值
normal: 单词换行遵循标准规则break-word: 即使需要拆分单词也会换行
用法示例：
CSS
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
HTML
<body>
<div class="container normal">若空间不足，这个文本会被换行。</div>
<div class="container break-word">这个长词语不会被换行若空间不足。</div>
</body>
代码解释：
overflow-wrap: normal;: 单词换行根据标准规则进行，不会拆分单词overflow-wrap: break-word;: 长词会根据需要被拆分并换行
8.4 属性的组合使用
属性 text-overflow，white-space 和 word-wrap 通常被一起使用，以在大小受限的容器中达到所需的文本显示效果。
用法示例：
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
HTML
<body>
<div class="container">若在容器中空间不足，这个文本会被裁剪并替换为省略号。</div>
</body>
代码解释：
white-space: nowrap;: 文本显示在一行，不会换行overflow: hidden;: 隐藏超出容器边界的文本text-overflow: ellipsis;: 在裁剪的文本末尾添加省略号overflow-wrap: break-word;: 长单词会被拆分并换行如果空间不足
GO TO FULL VERSION