图解 word-break

上一篇文章中为大家介绍了 overflow-wrap 属性的用法,与之非常类似的是 word-break 属性,很多同学容易搞混,今天为大家详细讲解。

work-break 用于指定如何进行单词内的断行,有四个取值:

  • normal:默认的断行规则。
  • break-all:允许在单词内任意位置断行。
  • keep-all:CJK(中文、日文、韩文)文本不会断行,保持单词不拆分。
  • break-word:效果等同于 word-break: normaloverflow-wrap: anywhere(注意:该属性被废弃了,虽然目前各浏览器还是支持的,建议大家不要使用。)

语法如下:

css 复制代码
/* 不在单词内断行 */
p {
  word-break: normal;
}

/* 单词碰到容器边界就断行 */
p.break-all {
  word-break: break-all;
}

/* 避免在CJK文本中句子内断行 */
p.keep-all {
  word-break: keep-all;
}

/* 如果溢出,允许在单词内任意位置断行 */
p.break-word {
  word-break: break-word;
}

首先看英文段落的场景:

可以看到,设置了 break-all 属性的段落,只要单词碰到容器边界,就立即换行,根本不关心单词是否被拆成两半,会造成一定的阅读困难 。对于一般的文本段落,是非常不推荐设置成 break-all 属性的,但是有很多同学用它来解决下面的文本溢出问题:

其实,上面的溢出可以用 overflow-wrap 属性来灵活处理,而不是 work-break,具体可参考这篇文章break-all 对英文段落的杀伤力非常大,务必谨慎使用。再来看中文段落的情况:

keep-all 与众不同的排版方式就体现出来了,CJK 字符不再是可以在任意字符处进行截断,而是类似于英文单词一样,默认不截断,只在句子分界处进行截断,即在标点符号处进行了换行。不过如果句子很长(相当于英文长单词),那么就会发生溢出:

在中英文混排的场景,能够更好的体现不同属性之间的区别:

  • normal:中文任意字符处换行,英文单词分界处换行。
  • break-all:中英文都任意字符处换行。
  • keep-all:中文句子分界处换行,英文单词分界处换行。
  • break-word:中文任意字符处换行,英文单词分界处换行,但是如果发生文本溢出,则自动换行。

可以看到,使用 break-all 时,它会在任何字符之间断开,这可能会导致英文单词在任意位置被拆分,而 keep-all 值主要用于东亚文字,不会在字之间断开,而是在句子分界处断开,一般是在标点符号处换行。

最后再强调一下 word-break 属性和 overflow-wrap 属性的主要区别:

  • word-break 可以对英文单词强制断行(break-all),对中文句子强制不断行(keep-all)。
  • overflow-wap 主要处理超出容器边界时的行为,以及影响到如何计算元素的最小尺寸。
相关推荐
Jerry30 分钟前
使用 Material 3 在 Compose 中设置主题
前端
chéng ௹37 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
tuokuac1 小时前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼1 小时前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少2 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.2 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者2 小时前
web 网页数据传输处理过程
前端
非凡ghost2 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
吃饭最爱2 小时前
html的基础知识
前端·html
我没想到原来他们都是一堆坏人2 小时前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python