如何让背景自适应换行后的文本宽度？

我太懂你这个困扰了！之前做类似的胶囊标签时也踩过这个坑——明明文本已经因为父容器宽度不够换行了，但红色背景框还是死撑着占满整个父容器的宽度，看起来特别别扭对吧？

其实问题的根源很简单：默认情况下<div>是块级元素，块级元素的宽度会自动撑满父容器的可用空间，哪怕内部文本换了行，背景也会跟着铺满整个块级元素的宽度。要解决这个问题，有几个简单又好用的方法：

方法一：用display: inline-block #

这是最经典的解决方案，把块级元素改成行内块元素，它的宽度就会完全由内部的文本内容决定，哪怕文本换了行，背景也只会紧紧包裹住文本的范围：

.parent {
  width: 300px;
  text-align: center; /* 要是想让内容在父容器里居中，加这行就行 */
}
.content {
  background-color: red;
  display: inline-block; /* 核心代码：让元素宽度由内容决定 */
  /* 如果是无空格的超长单词，再加这行强制换行：word-break: break-all; */
}

方法二：用width: fit-content #

这是CSS3新增的属性，专门用来让元素宽度刚好适配内容，兼容性现在也非常好，用起来更直观：

.parent {
  width: 300px;
}
.content {
  background-color: red;
  width: fit-content; /* 核心：自动适配内容宽度 */
  margin: 0 auto; /* 要居中的话加这行，实现水平居中 */
  /* 超长单词同样可以加word-break: break-all; */
}

另外，如果你是要把这个胶囊框绝对定位在图片中心，只需要给图片容器（也就是你的.parent）加上position: relative，然后给.content加绝对定位的居中代码就行，比如：

.parent {
  width: 300px;
  position: relative; /* 作为绝对定位的参照 */
}
.content {
  background-color: red;
  display: inline-block; /* 或者用width: fit-content */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美实现水平垂直居中 */
  word-break: break-all; /* 处理超长单词换行 */
}

这样改完之后，红色背景就会精准贴合换行后的每一行文本，再也不会乱撑宽度啦！

内容来源于stack exchange