如何使按钮下方文本宽度匹配动态宽度的按钮？

核心思路是让按钮和文本共享一个由按钮动态宽度决定的容器，文本元素的宽度被限制在该容器内，无需硬编码宽度值。以下是几种可行的实现方式：

方法一：使用inline-block容器 #

通过inline-block容器让宽度由按钮自动撑开，文本元素占满容器宽度：

.button {
  padding: 10px 30px;
  font-size: 20px;
}
.text-wrap {
  display: inline-block;
  text-align: center;
}
.text-wrap p {
  margin: 8px 0 0;
  width: 100%;
  word-wrap: break-word;
}

<div style="display: flex; justify-content: center;">
  <div class="text-wrap">
    <button class="button">
      PURCHASE NOW
    </button>
    <p>
      这是一段用于说明按钮功能的示例文本，我希望这段文本的宽度与上方按钮的宽度完全一致。但上方按钮的文本内容是动态的，因此无法硬编码设置其宽度。
    </p>
  </div>
</div>

方法二：使用CSS Grid #

利用网格布局让按钮和文本共享同一列，列宽由按钮自动决定：

.button {
  padding: 10px 30px;
  font-size: 20px;
}
.grid-wrap {
  display: grid;
  justify-content: center;
}
.grid-wrap p {
  margin: 8px 0 0;
  word-wrap: break-word;
  text-align: center;
}

<div class="grid-wrap">
  <button class="button">
    PURCHASE NOW
  </button>
  <p>
    这是一段用于说明按钮功能的示例文本，我希望这段文本的宽度与上方按钮的宽度完全一致。但上方按钮的文本内容是动态的，因此无法硬编码设置其宽度。
  </p>
</div>

方法三：使用inline-flex容器 #

通过inline-flex让容器宽度自适应按钮，文本占满容器宽度：

.button {
  padding: 10px 30px;
  font-size: 20px;
}
.flex-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.flex-wrap p {
  margin: 8px 0 0;
  width: 100%;
  word-wrap: break-word;
  text-align: center;
}

<div style="display: flex; justify-content: center;">
  <div class="flex-wrap">
    <button class="button">
      PURCHASE NOW
    </button>
    <p>
      这是一段用于说明按钮功能的示例文本，我希望这段文本的宽度与上方按钮的宽度完全一致。但上方按钮的文本内容是动态的，因此无法硬编码设置其宽度。
    </p>
  </div>
</div>

以上三种方案都能实现：无论按钮文本如何动态变化，下方文本的宽度都会自动匹配按钮宽度，不会超出。

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