CSS3 文本溢出

CSS3 新文本属性提供了对文本呈现的更多控制。

处理 CSS3 中的文本溢出

CSS3 引入了几个用于修改文本内容的新属性，但是其中一些属性很长时间都存在。这些属性使你可以精确控制 Web 浏览器上的文本呈现。

隐藏溢出文本

当文本设置为 nowrap 时，文本可能会溢出，例如，如果 white-space 属性的值设置为 nowrap 包含元素，或者单个单词太长而不适合长电子邮件地址。在这种情况下，你可以使用 CSS3 text-overflow 属性来确定溢出的文本内容的显示方式。

你可以显示或剪辑溢出的文本或剪辑，并在剪切文本的位置中显示省略号或自定义字符串以来指示用户。

word-break 属性通过可接受的值是： clip、ellipsis 和 string。

p {
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    background: #cdcdcd;
}
p.clipped {
    text-overflow: clip; /* clipped the overflowed text */
}
p.ellipses {
    text-overflow: ellipsis; /* display '…' to represent clipped text */
}

警告： 大多数 Web 浏览器都不支持 text-overflow 属性的 string 值，你应该更好地避免这种情况。

断开溢出文本

你还可以使用 CSS3 word-wrap 属性来断开一个长字并强制它换行溢出包含元素边界的新行。

word-wrap 属性接受的值为： normal 和 break-word 。

p {
    width: 200px;
    background: #ffc4ff;
    word-wrap: break-word;
}

提示： 请查看所有可能值的各个属性参考以及这些 CSS 属性的浏览器支持。

指定断字规则

你还可以使用 CSS3 word-break 属性自行指定文本的换行规则（即如何在单词中断行）。

word-break 属性接受的值为： normal ， break-all 和 keep-all 。

p {
    width: 150px;
    padding: 10px;
}
p.break {
    background: #bedb8b;
    word-break: break-all;
}
p.keep {
    background: #f09bbb;
    word-break: keep-all;
}