本文详解如何通过 css 控制段落（`
`）在容器内自然换行时保持左对齐、无首行缩进、不依赖 `
`，同时确保文本严格限制在指定宽度内并水平居中显示。
在网页排版中，常遇到这样的问题：一段文字内容较长，在响应式容器中自动换行后，视觉上却出现“意外缩进”——实际并非真正的缩进（如 text-indent），而是因父容器 text-align: center 导致子元素（如 <p>）整体居中，从而让多行文本的每行都居中对齐，造成首行与后续行看似错位的假象。
根本原因在于：.card { text-align: center } 会作用于其所有行内级子元素（包括 <p>），使 <p> 元素本身作为一个整体被居中；而 <p> 内部的多行文本又默认 text-align: start（即左对齐），因此当 <p> 宽度小于父容器时，它会居中摆放，但内部各行仍从左开始书写——这就形成了“容器居中 + 内容左对齐”的混合效果，视觉上类似首行突前、后续行缩进。
✅ 正确解法是 分离控制层级：
- 保留 .card 的 text-align: center（用于居中标题和按钮）；
- 单独为 .card-description 设置 text-align: left，消除多行文本的对齐干扰；
- 同时限定其宽度（如 width: 50%），并用 margin: 0 auto 实现自身居中（而非依赖父级居中），确保文本块在卡片内水平居中，且内部文字严格左对齐、换行自然、无任何缩进。
以下是关键 CSS 修正片段：
.card-description {
width: 50%; /* 与图片宽度一致，保持视觉平衡 */
margin: 0 auto; /* 水平居中该段落块 */
text-align: left; /* 关键！确保多行文本每行均从左侧开始 */
padding-bottom: 1.4rem;
font-size: 1.2rem;
}⚠️ 注意事项：
- 不要删除 .card { text-align: center }，否则标题（h2）和“APPLY TODAY”按钮将左对齐，破坏设计一致性；
- 若后续需统一调整所有卡片内文本对齐方式（如全部左对齐），可将 text-align: left 移至 .card 并为 h2 和 .apply-today 单独设置 text-align: center；
- width 值应结合设计稿灵活调整（如 60% 或 max-width: 300px），避免过宽导致换行过少、或过窄引发过度断行；
- 在移动端媒体查询中，记得同步更新 .card-description 的 width（例如在 max-width: 480px 下设为 90%），以保障小屏可读性。
最终效果：文字在限定宽度内自由换行，每一行均严格左对齐、无缩进、无额外空格，整体段落块居中显示，语义清晰，响应式健壮。
