CSS实现多行文本自适应div容器、避免背景多余空白的通用方法

问题原因 #

绝对定位的块级元素默认宽度会占满父元素的可用宽度，文本换行后背景色会铺满整个元素的宽度，所以才会出现文本末尾的蓝色空白区域。

解决方案 #

你只需要给.label选择器添加width: fit-content属性即可，这个属性能让元素的宽度自动收缩到和内部文本的实际宽度完全一致，不管文本是单行还是多行都能生效，是适配不同长度文本的通用方案。

修改后的完整CSS代码如下：

.box {
  border: 1px solid red;
  width: 200px;
  position: relative;
  padding-top: 40px;
}

.label {
  position: absolute;
  top: -10px;
  background-color: blue;
  width: fit-content;
}

如果需要兼容IE之类的旧版浏览器，可以用display: inline-block替代width: fit-content，效果基本一致。

内容的提问来源于stack exchange，提问作者ocram88