文本溢出换行时最小化标签宽度的CSS实现问询

给.tag添加以下CSS属性即可解决问题：

.tag {
  background: grey;
  display: inline-block;
  max-width: 100%;
}

原理说明 #

原来的.tag默认是块级元素（display: block），宽度会自动撑满父容器，哪怕内部文本换行后实际需要的宽度更小，就会出现多余空白。

• display: inline-block：让标签宽度由内部内容决定，不再强制占满父容器；
• max-width: 100%：确保标签不会超出父容器的宽度限制，当内容过长时自动换行，且换行后标签宽度会适配换行后的内容宽度，避免多余空白。

修改后的完整代码示例 #

.parent {
  border: red solid 1px;
  padding: 5px;
  margin: 5px;
}

.tag {
  background: grey;
  display: inline-block;
  max-width: 100%;
}

<div class="parent" style="width: 260px;">
  <div class="tag"><span>Sometextcontetent withsomelongwords</span></div>
</div>
<div class="parent" style="width: 250px;">
  <div class="tag"><span>Sometextcontetent withsomelongwords</span></div>
</div>

这个方案既满足了有足够空间时标签自适应文本宽度，又能在文本换行时让标签宽度最小化贴合内容，完美解决你遇到的问题。

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