本文详解如何通过 css 控制段落（`
`）在容器内自然换行时保持左对齐、无缩进、无多余空白，并精准限制宽度以匹配设计布局。
在网页排版中，常遇到这样的问题：段落文本超出容器宽度后自动换行，但视觉上却出现“意外缩进”或“左右不对齐”，尤其当父容器设置了 text-align: center 时——此时所有行内内容（包括 <p> 中的文本）都会被居中对齐，导致换行后的第二行、第三行看起来像被“缩进”了，实则是整段文字整体居中所致。
根本原因在于：.card { text-align: center } 会影响其内部所有行内级内容（如文字、<a>、<span>），而 <p> 默认是块级元素，其文本内容仍遵循父级的 text-align 设置。因此，即使未手动添加 <br> 或设置 margin-left，换行文本也会因居中对齐而呈现“非左对齐”的错觉。
✅ 正确解法是重置段落内部的文本对齐方式，并显式控制宽度与居中逻辑：
.card-description {
width: 50%; /* 与图片宽度一致，保持视觉平衡 */
margin: 0 auto; /* 水平居中该段落块本身（而非其中文字） */
text-align: left; /* 关键！覆盖父级 center，确保每行文字左对齐 */
padding-bottom: 1.4rem;
font-size: 1.2rem;
/* 移除可能干扰的默认 margin（可选） */
margin-top: 0;
margin-bottom: 0;
}⚠️ 注意事项：
- 不要依赖 white-space: pre-line 或 word-break 来解决此问题——它们用于强制断行或处理超长单词，而非对齐控制；
- 避免在 <p> 内使用 或空格模拟缩进，这会破坏语义与可访问性；
- 若需全局统一行为，建议为所有描述类段落定义 .text-left-auto 工具类，提升可维护性；
- 响应式断点中（如 max-width: 480px），记得同步调整 .card-description 的 width（例如改为 100%），否则小屏下可能出现水平溢出或过度收缩。
最终效果：文本在限定宽度内自然折行，每一行均严格左对齐、无首行缩进、无额外缩进感，同时整体段落在卡片中水平居中，完美契合现代卡片式布局的设计需求。
