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 */ }测试看看‹/›
警告:大多数Web浏览器都不支持string该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; }测试看看‹/›