CSS3 文本
CSS3 提供了一系列强大的文本效果属性，可以让网页文本更加美观和吸引人。在本章中你讲将了解到以下文本属性：
text-shadow：控制文本阴影的显示效果。text-overflow：控制文本溢出时显示效果。word-wrap：文本换行单词是溢出还是断开。word-break：单词换行是否保证单词完整性。
CSS3 文本阴影
CSS3 中text-shadow属性用于控制文本阴影，你可以指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
.example1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.example2 {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de;
}
.example3 {
text-shadow: 1px 1px 0 #ff0000, 2px 2px 0 #00ff00, 3px 3px 0 #0000ff;
}
.example4 {
text-shadow: 0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}
.example5 {
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333;
}
.example6 {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073;
}实现的效果：
CSS3 文本溢出
CSS3 中text-overflow属性，用于控制当文本超出容器范围时的显示方式。
/* CSS3 单行文本溢出省略 */
.ellipsis {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出显示省略号 */
}
/* CSS3 两行文本溢出省略 */
.multi-line-ellipsis{
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制显示行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}实现的效果：
这是一段超长的文本内容，超出容器宽度时会正常溢出显示。
这是一段超长的文本内容，超出部分会显示为省略号（...）。
这是一段超长的文本内容，超出部分会被直接裁剪掉。
这是一段超长的文本内容，理论上会显示自定义标记（但大多数浏览器不支持）。
这是一段超长的多行文本内容，通过非标准属性 -webkit-line-clamp 实现多行省略效果。需要结合 display: -webkit-box 使用。
CSS3 文本换行
CSS3 中word-wrap属性，用于控制长单词或 URL 等不可分割的字符串在容器宽度不足时的换行行为。现在它已被overflow-wrap属性取代，但大多数浏览器仍然支持word-wrap作为overflow-wrap的别名。
normal(默认值)：只在正常的单词断点处换行（如空格或连字符处），单词不会换行，可能会溢出容器。break-word：允许在单词内换行以防止溢出，会在任何字符处断行以确保内容适应容器。
.example {word-wrap:break-word;}实现的效果：
这是一个普通段落，包含一个超长英文单词: Pneumonoultramicroscopicsilicovolcanoconiosis，长URL示例: https://www.example.com/this/is/a/very/long/url/path/that/should/not/break
这是一个普通段落，包含一个超长英文单词: Pneumonoultramicroscopicsilicovolcanoconiosis，长URL示例: https://www.example.com/this/is/a/very/long/url/path/that/should/not/break
CSS3 单词换行
CSS3 中word-break属性，用于控制文本换行方式的属性。
特别适合处理不同语言的文本换行情况，尤其是中文、日文、韩文等没有空格分隔的文本。
normal(默认值)：默认断行，英文单词不会在中间断开，中文会在任意字符间断行。break-all：允许在任意字符间断行，适合内容中包含大量长英文单词但需要紧凑布局的情况。keep-all：不允许在字符间断行，适合需要保持中文文本完整性的情况。
.example1 {
word-break: keep-all;
}
.example2 {
word-break: break-all;
}实现的效果：
CSS3 文本属性
| 属性 | 描述 |
|---|---|
| hanging-punctuation | 规定标点字符是否位于线框之外。 |
| punctuation-trim | 规定是否对标点字符进行修剪。 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
| text-outline | 规定文本的轮廓。 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 |
| text-shadow | 向文本添加阴影。 |
| text-wrap | 规定文本的换行规则。 |
| word-break | 规定非中日韩文本的换行规则。 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 |
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈