CSS3 文本溢出
CSS3 新的文本属性提供了对文本呈现的更多控制。
在 CSS3 中处理文本溢出
CSS3 引入了几个新的属性属性来修改文本内容，但是其中一些属性已经存在了很长时间。 这些属性使您可以精确控制 Web 浏览器上的文本呈现。
隐藏溢出文本
当阻止换行时，文本可能会溢出，例如，如果包含元素的 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; /* 剪辑溢出的文本 */
}
p.ellipses {
text-overflow: ellipsis; /* 显示 '…' 以表示剪切的文本 */
}警告：大多数网络浏览器不支持 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;
}Advertisements