上一章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为文本指定断行规则(即如何在单词中断行)。
【css3文本溢出 – CSS3高级教程】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;
}
推荐阅读
- css3阴影shadow – CSS3高级教程
- css3渐变gradient – CSS3高级教程
- css3背景background – CSS3高级教程
- css3颜色color – CSS3高级教程
- css3边界border – CSS3高级教程
- 验证css代码 – CSS高级教程
- css属性选择器 – CSS高级教程
- css透明度opacity – CSS高级教程
- css精灵sprite – CSS高级教程