CSS ＞ white-space

white-space

white-space 用于设置空格和换行的处理方式, 默认值是 white-space:normal

自有选项有: normal , nowrap , pre , pre-line , pre-wrap , break-spaces
[“normal” , “nowrap” ,“pre” , “pre-line” , “pre-wrap” , “break-spaces” ]

通用选项有: inherit initial unset revert
[“inherit” , “initial” , “unset” , “revert”]

<pre>标签相当于 white-space:pre; 的效果

white-space的选项

normal , nowrap , pre , pre-line , pre-wrap , break-spaces

[“normal” , “nowrap” ,“pre” , “pre-line” , “pre-wrap” , “break-spaces” ]

• normal 默认值 空格合并 , \n换行符不换行 , 超过width会换行
• nowrap 空格合并 , \n换行符不换行 , 超过width也不换行 , 除非遇到<br/>才换行,否则都在一行上
• pre 空格保留 , \n换行符有换行效果 , 超过width不换行
• pre-line 空格合并 , \n换行符有换行效果 , 非字母数字下划线超过width会换行
• pre-wrap 空格保留 , \n换行符有换行效果 , 非字母数字下划线超过width会换行 , 连续空格不换行
• break-spaces 除了连续空格超过容器宽度width会换行, 其它与pre-wrap相同 , 连续空格会换行
• 所有选项遇到<br/>都会显示换行效果
• 所有选项相连的字母数字下划线超出width边界也不会换行
• 通用选项: inherit initial unset revert

normal 是默认值

nowrap

pre

pre-line

pre-wrap

break-spaces

pre-wrap 与 break-spaces 的区别

一般来看,pre-wrap与break-spaces效果基本基本相同,
这里记录发现的不同点

当连续的空格超过容器宽度时

当连续的空格超过容器宽度时 pre-wrap 不会在空格之间换行

当连续的空格超过容器宽度时 break-spaces 会换行