css3文本溢出 – CSS3高级教程

上一章CSS3高级教程请查看：css3渐变gradient

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; /* 剪切溢出的文本 */
}
p.ellipses {
    text-overflow: ellipsis; /* 显示“…”来表示剪切的文本 */
}

警告：大多数web浏览器都不支持text-overflow属性的字符串值，你最好避免这种情况。

溢出文本换行

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