如何让CSS盒子宽度仅适配文本宽度（无需使用<br>标签）

你的核心需求是让灰色.title盒子宽度仅适配内部文本（最长行的宽度），无需依赖<br>标签。当前前两个盒子宽度超出是因为.title用display: table时，在块级父容器（.title_container默认宽度100%）中，table元素会自动填充可用宽度；而第三个盒子加了<br>强制换行后，table会收缩到最长行的宽度，这就是它符合预期的原因。

给你几种实用的解决方法：

方法一：使用width: fit-content（推荐） #

这是最直接的方案，让元素宽度恰好容纳内容，同时允许文本正常换行，盒子宽度取最长行的宽度：

.title {
  background-color: grey;
  color: white;
  padding: 10px;
  width: fit-content; /* 核心属性 */
}

fit-content兼容所有现代浏览器，完全满足需求，原有的display: table可以保留或移除，不影响效果。

方法二：改用display: inline-block #

inline-block元素默认宽度由内容决定，同时支持文本自动换行：

.title {
  background-color: grey;
  color: white;
  padding: 10px;
  display: inline-block;
}

方法三：修改父容器.title_container的显示方式 #

让父容器宽度由子元素决定，这样.title的display: table会自动收缩：

.title_container {
  padding: 10px;
  display: inline-block;
}

完整修改示例（以方法一为例） #

CSS：

.item {
  margin-bottom: 20px;
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.title_container {
  padding: 10px;
}

.title {
  background-color: grey;
  color: white;
  padding: 10px;
  width: fit-content;
}

HTML（移除不必要的<br>）：

<div class="item">
  <div class="title_container">
    <div class="title">
      Hello
    </div>
  </div>
</div>

<div class="item">
  <div class="title_container">
    <div class="title">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

<div class="item">
  <div class="title_container">
    <div class="title">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

以上方案都能实现.title盒子宽度自适应文本，无需依赖<br>标签。

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