手册
目录
收藏123
分享
阅读1042
更新时间2025-07-16
在本章中，您将学习如下属性：
text-overflowword-wrapword-breakwriting-modeCSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。
可以被裁剪：
这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本
也可以将其呈现为省略号（...）：
这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本
CSS 代码如下：
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容：
div.test:hover {
overflow: visible;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS word-wrap 属性使长文字能够被折断并换到下一行。
如果一个单词太长而无法容纳在一个区域内，它会向外扩展：
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
通过 word-wrap 属性，您可以强制对文本进行换行 - 即使这意味着在词中间将其拆分：
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
CSS 代码如下：
允许长单词被打断并换行到下一行：
p {
word-wrap: break-word;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS word-break 属性指定换行规则。
本段包含一些文本。此行将连字符打断：
This paragraph contains some text. This line will-break-at-hyphens.
本段包含一些文本。这些行将在任何字符处中断：
This paragraph contains some text. The lines will break at any character.
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS writing-mode 属性规定文本行是水平放置还是垂直放置。
Some text with a span element with a vertical-rl writing-mode.
下面的例子展示了一些不同的书写模式：
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
下表列出了 CSS 文本效果属性：
| 属性 | 描述 |
|---|---|
| text-align-last | 指定如何对齐文本的最后一行。 |
| text-justify | 指定对齐的文本应如何对齐和间隔。 |
| text-overflow | 指定应如何向用户呈现未显示的溢出内容。 |
| word-break | 指定非 CJK 脚本的换行规则。 |
| word-wrap | 允许长单词被打断并换到下一行。 |
| writing-mode | 指定文本行是水平放置还是垂直放置。 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
