@yangfch3
2015-09-20T21:51:40.000000Z
字数 752
阅读 2893
CSS
white-space
:normal
| pre
| nowrap
| pre-wrap
| pre-line
默认值:normal
适用于:所有元素
继承性:有
动画性:否
计算值:指定值
normal
:默认处理方式。忽略行首空白,忽略连续多余空白,其余照常 换行 排版。
pre
:即全部严格保留原格式。
nowrap
:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br
对象。
pre-wrap
:不忽略行首空白,也不忽略文字间的多余空白,
pre-line
:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。与normal
一样
一连串英文字母连在一起,视为一个单词。单词过长,超过边界,默认不换行,会超出边界。
使用word-break
方法折行:
.demo{
word-break:break-all
}
使用word-wrap
折行
.demo{
word-wrap : break-word // 内容将在边界内换行。如果需要,过长单词内部允许折行。
}
一般中文不会出现一个单词过长导致超出边界的问题,一般是特殊要求,或者文本胡乱输入长串英文字符才会出现超出边界的问题。
CSS3
中已经将 word-wrap
改名为 overflow-wrap
当块容器 <' overflow
'> 为非visible
时,定义内联内容溢出其块容器是否 截断 或者添加 (...
) 及 自定义字符
要使得 <' text-overflow
'> 属性生效,块容器必须显式定义 <' overflow
'> 为非visible
值,同时显式或者隐式的定义 <' width
'> 为非auto
值, <' white-space
'> 为nowrap
值。