CSS3 文本样式：溢出、换行与断行控制

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;
    : ellipsis;
}