视口变窄时带文本的居中div失效问题排查与解决

要实现「文本块整体居中、内部文本左对齐」的效果，核心是让.centered的宽度由自身内容决定（而非撑满父容器），再通过父容器的居中规则让它水平居中。

步骤1：调整.viewport样式 #

确保模拟视口具备居中对齐的基础：

.viewport {
  width: 440px; /* 目标视口宽度 */
  margin: 0 auto; /* 可选：让视口本身在页面居中 */
  padding: 20px;
  border: 1px solid #ccc;
  /* 关键：让子元素水平居中 */
  display: flex;
  justify-content: center;
}

步骤2：修改.centered样式 #

让内容块宽度自适应文本，同时保持内部文本左对齐：

.centered {
  /* 核心：宽度由内容决定，不撑满父容器 */
  width: fit-content;
  max-width: 100%; /* 文本过长时限制最大宽度，避免溢出视口 */
  text-align: left; /* 内部文本左对齐 */
  padding: 0 10px; /* 可选：让文本和容器边缘留间距 */
}

步骤3：处理预设换行与自动换行 #

如果文本包含预设换行（如<br>标签）或需要自动换行，添加以下样式：

.centered {
  white-space: pre-line; /* 保留预设换行，同时自动换行过长文本 */
}

完整示例代码 #

<div class="viewport">
  <div class="quote">
    <div class="centered">
      第一行预设换行文本<br>
      这是一段较长的文本，当视口宽度缩窄时，这段内容会自动换行，同时整个文本块保持居中，内部文本始终左对齐。
      第三行手动换行的文本
    </div>
  </div>
</div>

.viewport {
  width: 440px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  display: flex;
  justify-content: center;
}

.quote {
  width: 100%;
}

.centered {
  width: fit-content;
  max-width: 100%;
  text-align: left;
  white-space: pre-line;
  padding: 0 10px;
}

原理说明 #

• width: fit-content 让.centered的宽度刚好包裹文本内容，使整个文本块能作为一个整体被居中。
• max-width: 100% 防止长文本溢出视口，触发自动换行。
• 也可以用.quote设置text-align: center，.centered设置display: inline-block替代flex布局，实现同样的居中效果。

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