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


