WonderCSS

CSS 中相关“文字换行”的样式

在我们能做页面设计时,对于一些细节往往不太在意,一些相关细节的 CSS 语句也淡出视野,当然或许大多时候我们用不上,但真正需要使用时便抓虾了。例如文字段落的换行规则,在样式表里,主要有强制换行和禁止换行两类。

最常使用的设置如下:


word-break: break-all; /* 只对英文起作用,以字母为单位换行 */
word-wrap: break-word; /* 只对英文起作用,以单词为单位换行 */
white-space: pre-wrap; /* 只对中文起作用,强制换行 */

下面我们简单的逐一解释下。

word-break: break-all

文本回行是以单个字母为单位,假设容器(如div)宽度为 600px,它的内容就会到 600px 自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分在前一行尾,另一部分换到下一行首。

word-wrap: break-word

文本回行是以单词全部字母组合为单位,例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。这也是某些客户常常指责:“文字对不齐”的原因。

white-space: pre-wrap

通常作为默认设置,强制换行。如果设置成 white-space:nowrap; 的话,文字会在在文本行上“一路狂奔不回头”,直到遇到 <br /> 标签为止。

最后补充一个 Table 表格内涉及到换行的 CSS 属性,table-layout:fixed; 列宽由表格宽度和列宽度设定。

By 于湛 发布于 2013.04.14 1,825 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注