自适应flex-item内英文自动折行后的宽度问题
换行的锅
我们来看这个好玩的问题哈
这个灰色部分是一个 flex 布局的容器
它的宽度被固定在了150像素哈
然后呢左侧这是一个title
然后右侧是一个badge标签
现在这个title变长的时候呢
带着标签会跟着往后挪
这个没有任何问题哈
但问题是如果这个title太长了
长到导致他换行了
那这个badge标签就会离这个文字
有距离那为什么会有这个距离呢
其实我们把这个
换行的规则改一下
我们改成
break-all
大家看 这样就没问题
所以呢我们可以推断出来
他按照单词换行的情况下
虽然里边的文字换行了
但是整个这个
span标签的宽度是没有变化的
大家看 现在是125
然后呢我们再看后边这个
badge标签
25 加一起正好是150
也就是说这里边的文字之所以会换行
是因为
span标签（title）的宽度长长长到125之后
还是不够用
所以他里边的文字就会换行
但是文字虽然换行了
所以呢要解决这个问题
我们需要拿到
他自动换行以后的实际宽度
假如说是90
我们试一下
我们把它强制改成90，大家看
这样就没有问题
但是我们怎么才能拿到他换行
之后的实际宽度呢
我记得原来我们用span标签的时候
你设宽度反而不好使
他就是一直是包裹的内容，内容有多少
他span标签有多宽
但为什么到这就不行了呢
原因是哈
他被放到了一个
flex 布局里面
大家看
外边这是 flex
所以呢这个 span
表签他的 display 就不是inline了
他是一个 block
所以我们要想办法让它变成inline
所以呢
我们先把它外面套上一层
我们这样
套上一层以后呢
我们就会发现
这个 div 是125
但里边的span呢
他的实际宽度（他这写的 auto， 还没有）
但是我们可以用 js 拿到哈
我们试一下
document.querySelector...
我们就直接找span吧（现在只有一个span）
点 offset...
width 大家看 84
那我们把
这个外边的 div 的宽度设置成84
试一下
大家看！这没有问题了
所以呢我们可以这样写 script
然后在这里边先获取到所有的...
啊我们把这个title（样式）放外边（的容器上）
好我们在这拿到所有的title
等于 document
点 querySelectorAll
好然后我们遍历这个title
（变量名）我们就用：
"t" 吧
然后
我们取到 t点里边的selector里面的
span标签
点 offsetWidth
拼接上 px
把它赋值给谁呢
复制给 t.style.width
好我们刷新一下 大家看可以了
我把这个文字改少点
没问题
换行
也没问题
然后呢
我们把它复制一遍
然后呢来个 吧
粘贴
这是两个
然后呢我们少点
大家看
也没问题
最后更新于