white-space
white-space 属性设置如何处理元素内的空白。
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
word-break
word-break 属性指定非CJK脚本的断行规则。
CJK脚本是中国,日本和韩国("中日韩")脚本。
其中,break-all 和 break-word 都可以强制换行。
值 | 描述 |
---|---|
normal | 使用浏览器默认的换行规则。 |
break-all | 允许在单词内换行。 |
keep-all | 只能在半角空格或连字符处换行。 |
hyphens
hyphens 属性定义是否允许在一行文本中使用连字符创建更多的自动换行机会。
hyphens设置连字符规则,可取值为 auto、none、manual。其中,auto 和 manual 都可以强制换行。
值 | 描述 |
---|---|
none | 单词不用连字符(不换行)。 |
manual | 默认。单词只在 ‐ 或 处有连字符(如果需要)。 |
auto | 在算法确定的位置插入单词连字符(如果需要)。 |
initial | 将此属性设置为其默认值。 |
inherit | 从其父元素继承此属性。 |
overflow-wrap
overflow-wrap:设置换行规则,可取值为 normal、break-word、anywhere。其中,break-word 可以强制换行。
中英文强制换行
word-break:break-all;
white-space: pre-wrap;
强制不换行
white-space:nowrap;
需要注意的是,这些属性在不同的浏览器中兼容性可能会有所差异,需要进行兼容性测试和处理。