本文详解如何通过 css 控制段落（`
`）在容器内自然换行时保持左对齐、无缩进、无多余空白，并精准限制宽度以匹配设计布局。
在网页排版中，常遇到这样的问题：段落文本超出容器宽度后自动换行，但视觉上却出现“意外缩进”或“左右不对齐”，尤其当父容器设置了 text-align: center 时——此时所有行内内容（包括
中的文本）都会被居中对齐，导致换行后的第二行、第三行看起来像被“缩进”了，实则是整段文字整体居中所致。
根本原因在于：.card { text-align: center } 会影响其内部所有行内级内容（如文字、、），而 默认是块级元素，其文本内容仍遵循父级的 text-align 设置。因此，即使未手动添加 ✅ 正确解法是重置段落内部的文本对齐方式，并显式控制宽度与居中逻辑： ⚠️ 注意事项： 内使用 或空格模拟缩进，这会破坏语义与可访问性； 最终效果：文本在限定宽度内自然折行，每一行均严格左对齐、无首行缩进、无额外缩进感，同时整体段落在卡片中水平居中，完美契合现代卡片式布局的设计需求。
或设置 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;
}
