" />
本文详解如何通过 css 控制段落（`
`）的自动换行行为，消除默认首行缩进或不对齐问题，确保文本在限定宽度内自然折行、左对齐、无额外缩进，并保持响应式布局完整性。
在网页开发中，常遇到这样的场景：一段文字内容较长，需在固定容器内自动换行显示，但默认渲染时却出现首行缩进、左右不对齐、或换行后行间距异常等问题——这并非 <br> 导致，而是由 CSS 盒模型与文本流特性共同作用的结果。
核心问题在于：.card-description 当前设置了 width: 90% 且父容器 .card 应用了 text-align: center，导致内部 <p> 文本整体居中，而段落本身作为块级元素会继承该对齐方式，视觉上表现为“换行后每行都居中”，误以为是“缩进”；同时过宽的 width 值（90%）使文本块超出图像区域，在小屏下更易引发错位。
✅ 正确解法是 显式重置文本对齐方式 + 精确控制段落宽度与水平居中：
.card-description {
width: 50%; /* 与图片宽度一致，保持视觉统一 */
margin: 0 auto; /* 水平居中该段落块（非文本） */
text-align: left; /* 关键！重置内部文本为左对齐，消除“伪缩进” */
padding-bottom: 1.4rem;
font-size: 1.2rem;
}? 补充说明：text-align: center 在 .card 上影响的是其子元素的行内内容对齐方式（如文字、<a>、<img> 的基线），而非子块级元素（如 <p>）自身的定位。因此，.card-description 作为块级元素，默认独占一行，其内部文字若未显式设置 text-align，将继承 .card 的 center，造成整段文字居中显示 —— 这就是你看到的“换行后每行都偏移”的真实原因。
? 其他注意事项：
- 避免在语义化段落中滥用 <br>：它破坏可访问性（屏幕阅读器可能误读为内容分隔），也违背 HTML 结构与样式的分离原则；
- 若需多段紧凑排版，建议用多个 <p> 标签 + 统一 CSS 控制，而非强行单段加换行符；
- 响应式断点中，记得同步调整 .card-description 的 width（如在 max-width: 480px 下设为 100%），否则小屏可能出现文字溢出或过度收缩；
- 如需进一步优化阅读体验，可添加 line-height: 1.6 和 hyphens: auto（配合 lang 属性）提升长单词换行合理性。
最终效果：文字严格在设定宽度内自动折行，首行无缩进，各行左对齐，与标题、按钮形成清晰视觉节奏，且完全适配桌面、平板与手机视口。
