HOOOS

css 强制换行与强制不换行的属性

0 514 css html代码前端开发
Apple

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;

需要注意的是,这些属性在不同的浏览器中兼容性可能会有所差异,需要进行兼容性测试和处理。

点评评价

captcha
健康