自适应flex-item内英文自动折行后的宽度问题
换行的锅
我们来看这个好玩的问题哈
这个灰色部分是一个 flex 布局的容器
它的宽度被固定在了150像素哈
然后呢左侧这是一个title
然后右侧是一个badge标签
现在这个title变长的时候呢
带着标签会跟着往后挪
这个没有任何问题哈
但问题是如果这个title太长了
长到导致他换行了
那这个badge标签就会离这个文字
有距离那为什么会有这个距离呢
其实我们把这个
换行的规则改一下
我们改成
break-all
大家看 这样就没问题
所以呢我们可以推断出来
他按照单词换行的情况下
虽然里边的文字换行了
但是整个这个
span标签的宽度是没有变化的
大家看 现在是125
然后呢我们再看后边这个
badge标签
25 加一起正好是150
也就是说这里边的文字之所以会换行
是因为
span标签（title）的宽度长长长到125之后
还是不够用
所以他里边的文字就会换行
但是文字虽然换行了
所以呢要解决这个问题
我们需要拿到
他自动换行以后的实际宽度
假如说是90
我们试一下
我们把它强制改成90，大家看
这样就没有问题
但是我们怎么才能拿到他换行
之后的实际宽度呢
我记得原来我们用span标签的时候
你设 宽度反而不好使
他就是一直是包裹的内容，内容有多少