关于CSS中的word-break:break-all

原创 野人  2022-01-11 21:38  阅读 78 次

本来这篇文章老早就可以完成了,但是为了让自己能稍微写的专业点,就去看了半个多小时别人写的文章,结果是越看越乱,赶紧跑回来,写自己的文章算了。

反正咱们本身就是记录自己平常在编码的过程中遇到的问题,然后用的是什么方法解决就好了。

毕竟真论教学我不配,多少官方文档/大佬已经写过了,只不过有的文档,确实读起来晦涩难懂,那这时候就要去找一些大佬的博客文章,把这晦涩难懂的词汇转换成幽默风趣的词汇,让人听了就感兴趣,又易于吸收,这才是真大佬。

今天是使用Antd里面的Tree树形控件时,发现只要是连续的英文单词的话,就会造成图标跟文字换行且文字会溢出(如下图)。

刚开始的排查方向错了,还以为是那个图标的元素会不会变成了块状元素导致了,试过好几次后,无果,然后才发现是CSS样式的原因,虽说平常这个CSS属性都有写,但是都属于用到才去查,且但是也没有说去折腾里面具体的属性值都有什么区别,导致每次都是F12审查元素,看见了这属性值可以用呀,那就完事了的状态。

那么接下来就展开说说这个word-break。

语法:

word-break: normal(默认值) | break-all | keep-all

值:

normal:使用默认的换行规则。(我的理解,就像我上面遇到的问题,假设盒子的宽度200px,那行的超长文字宽度250px,然后程序就开始判断了,那你这第一行能放的下我吗,不能的话就只能换行显示,该溢出就溢出了呗,如果你的超长文字中含有空格这些,那我就给你做换行显示喽)

break-all:允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行(我的理解,就是把原本一行显示不了的话,那就拆成两/n行显示)。

keep-all:不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。

参考资料

https://juejin.cn/search?query=word-break

https://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

本文地址:https://www.yerenwz.com/5550.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

发表评论