断行之word-break 和 word-wrap

中文很少在意断行的事情,英文长单词因为长度不够的断行会影响阅读,CSS中的word-break大法好。但也有稍微要注意的情况

1. 带空格或短横, 例如 aaaa-aa aaaaaaa-aaaaaa

normal && keep-all && break-word(非标准)
11897792-25dc9b329b6edde4.png
break-all
11897792-70391a7505b30811.png
  • 带空格或短横, break-all任意断行,其他都是在空格或短横断行

2.连续长单词, 例如: aaaaaaaaaaaaaaaa

normal && keep-all

11897792-7ded6371772f0294.png

break-all && break-word

11897792-98d96d576bee5df3.png
  • 连续长单词,break-allbreak-word会任意断行,keep-allnormal 不断行

MND 说明

11897792-ebee12989a2849d3.png

填坑

然鹅,实际应用中,只是设置word-break:normal,按照空格断行了,却会出现某些长度超过的单词被迫显示省略号

11897792-c82785285751fefa.png

这时候就需要加上 word-wrap: break-word,这样既会按照空格断行,也会显示全部单词,完美。
11897792-90fba11d8ae2e45d.png

总结: 既想单词按照空格换行,又想全部显示,这样就完美啦

word-break: normal;
word-wrap: break-word;
踩坑:某些(不知道为啥)的情况下,设置了这两个属性还是无效,增加一条white-space: normal; 就好了

猜你喜欢

转载自blog.csdn.net/weixin_34183910/article/details/90830305
今日推荐