CSS3 文本溢出(Text Overflow)

CSS3的新文本属性可提供对文本呈现的更多指定。

在CSS3中处理文本溢出

CSS3引入了几个新的属性属性来修改文本内容，但是其中一些属性已经存在很长时间了。这些属性使您可以精确指定Web浏览器上文本的呈现。

隐藏溢出文本

例如，如果将空白元素的white-space属性值设置为nowrap，或者单个单词太长而无法容纳较长的电子邮件地址，则可能会导致文本溢出（例如，将其禁止换行）。 在这种情况下，可以使用CSS3 text-overflow属性来确定溢出文本内容的显示方式。

您可以显示或剪切溢出的文本，也可以剪切并在剪切文本的palace中显示省略号或自定义字符串，以指示用户。

该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 */
}

中断溢出文本

您还可以使用CSS3 word-wrap属性将一个长单词打断，并使其换行，以使包含元素的边界溢出。

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

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

指定文本换行规则

您还可以使用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;
}