内容少时居中，多时居左

要实现**"字数少时居中，字数多时左对齐"**的效果，可以使用 CSS 的 text-align + display: inline-block 方案，或者 flexbox 结合 max-width 的方案。

---

方法 1：使用 text-align + display: inline-block

核心思路：

1. 让文本内容是 inline-block，这样可以根据内容宽度自适应。
2. 通过 text-align: center; 让容器内的短文本居中。
3. 当文本超出一定长度时，内容自然换行并左对齐。

HTML

<div class="text-container">
  <span class="text-content">短文本</span>
</div>

CSS

.text-container {
  width: 100%;
  text-align: center; /* 默认居中 */
}

.text-content {
  display: inline-block;
  max-width: 60%; /* 限制最大宽度 */
  text-align: left; /* 超过 max-width 时左对齐 */
  white-space: normal; /* 允许换行 */
}

预览：https://jsbin.com/woririf/edit?html,css,output

✅ 优点：

• 短文本（宽度未超过 max-width）时，inline-block 让文本整体居中。
• 长文本（超过 max-width）时，文本内容自然换行并左对齐。

---

方法 2：使用 flexbox + max-width

核心思路：

1. 使用 display: flex; 来控制对齐方式。
2. 通过 max-width 限制短文本居中，长文本左对齐。

HTML

<div class="text-container">
  这是一个短文本
</div>

<div class="text-container">
  这是一个很长很长的文本内容，当字数超过一定长度时，会自动左对齐显示，确保排版美观。
</div>

CSS

.text-container {
  display: flex;
  justify-content: center; /* 默认居中 */
  max-width: 60%; /* 限制宽度 */
  margin: 0 auto; /* 保证居中 */
  text-align: left; /* 默认左对齐 */
  white-space: normal; /* 允许换行 */
}

预览：https://jsbin.com/daqacuv/edit?html,css,output

✅ 优点：

• justify-content: center; 让短文本居中。
• max-width: 60% 控制超出后换行，自动左对齐。

---

方法 3：利用 fit-content 让短文本居中

核心思路：

• fit-content 收缩性、自适应内容特性。

CSS

.text-container {
  display: block;
  width:fit-content;
  margin: 0 auto;
  text-align: left;
  white-space: normal;
}

预览：https://jsbin.com/qabewut/1/edit?html,css,output

✅ 优点：

• 简短

---