CSS3 文本样式：溢出、换行与断行控制
在网页布局中，文本超出容器边界的情况很常见。CSS3 引入了一些新属性来优雅地处理这些场景，主要包括文本溢出显示、长单词自动换行以及断行规则。
浏览器支持情况
| 属性 | Chrome | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
text-overflow：溢出内容的处理方式
当文本宽度超过容器且设置了 overflow: hidden 时，我们可以用 text-overflow 决定剩余部分如何展示。它主要有两个值：clip（直接裁剪）和 ellipsis（显示省略号）。
注意，要生效通常需要配合 white-space: nowrap 和 width 限制。
<style>
.clip {
border: 1px solid #000;
overflow: hidden;
white-space: nowrap;
width: 200px;
text-overflow: clip;
}
.ellipsis {
border: 1px solid #000;
overflow: hidden;
white-space: nowrap;
width: 200px;
text-overflow: ellipsis;
}
</style>
如果想让鼠标悬停时显示完整内容，可以利用伪类切换状态：
.test:hover {
text-overflow: inherit;
overflow: visible;
}
word-wrap：长单词自动换行
默认情况下，过长的单词会撑破容器。word-wrap 允许浏览器在必要时切断单词以适应宽度。
p {
word-wrap: break-word; /* 或 overflow-wrap: break-word */
}
设置为 normal 时，长单词不会换行；设置为 break-word 时，如果单词太长无法放入一行，则强制换行。
word-break：断行规则
这个属性控制是否可以在任意字符间换行，对中日韩文字排版尤为重要。
.keep-all {
word-break: keep-all; /* 保持单词完整性，仅在标点处断开 */
}
.break-all {
word-break: break-all; /* 允许在任意字符间断开 */
}
keep-all 适合英文环境，避免单词被切断；break-all 则更激进，能防止长串无空格字符导致布局崩坏。