文字是网页展示内容的重要载体,最常见的文字有中文和英文。但浏览器处理同时含有中文和英文的句子时,会发现换行处理是不尽人意,要么长单词超出容器,要么单词断的太快,造成阅读的障碍。所以处理文字换行很有必要掌握!

语法

word-break:value(为以下取值);

Normal,默认值,根据浏览器默认规则来拆分换行,每种浏览器可能都会有不同效果

keep-all,凡是长单词,都不拆行,或者半角空格或连字符处才换行,简单点理解,就是长单词保持原样,有标点符号才换行,所以很容易造成溢出容器或者容器内有缺块。

break-all,所有单词碰到边界一律拆分换行,这也是常用处理中英文字段的手法,可以让容器内文字排列整齐。

break-word,最理想的处理手法,长单词只有超出才拆分换行,其他保持不变。可以说是keep-all和break-all的结合体。

案例

当word-break:keep-all,所有“单词”一律不拆分换行,极有可能会溢出容器,并且空格、标点符号也会触发换行。

f44437a4d611458054cd73f855819b84.png

超长单词超出容器

当word-break:break-all,所有单词碰到边界一律拆分换行,就会造成英文单词断开。这也是目前国内常用的处理方法。

6be2d80a8b6cb5b461a335ef512f5c8e.png

超长单词被拆分换行

当word-break:break-word,长单词只有超出才拆分换行,其他保持不变。这种是上两种结合体,是最完美解决超长文字换行方案,单单记这个就足够了!

821899f9201fe3503ae988c701999a9d.png

超长单词先换行,发现仍然不够,就断行

总结

f2dcdd00326a4b4f731297ea85515354.png

总结

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐