Bootstrap 5多行文本对齐问题：如何实现换行内容与首行对齐？

你遇到的问题是因为图标作为行内元素，地址文本换行后会默认对齐容器左侧，而非首行文本的起始位置。以下两种Bootstrap原生的解决方案可以快速解决这个问题：

方案一：使用Flex布局（推荐） #

通过将每个联系项转为弹性布局容器，让文本区域占据剩余空间，换行时自动保持缩进：

<div class="col-lg-3 col-md-6">
    <h5 class="text-light mb-4">Stay in contact</h5>
    <!-- 地址项 -->
    <div class="d-flex align-items-start mb-2">
        <i class="fa fa-map-marker-alt me-3 mt-1"></i>
        <span>619 Otaroad-north-Sidrac, New York, New York 291290</span>
    </div>
    <!-- 电话项 -->
    <div class="d-flex align-items-start mb-2">
        <i class="fa fa-phone-alt me-3"></i>
        <a href="tel:213-622-1212">213-622-1212</a>
    </div>
    <!-- 邮箱项 -->
    <div class="d-flex align-items-start">
        <i class="fa fa-envelope me-3"></i>
        <a href="mailto:bob@bob.usa">bob@bob.usa</a>
    </div>
</div>

• d-flex：将元素转为弹性容器，图标和文本成为弹性子元素
• align-items-start：让图标和文本顶部对齐，避免垂直错位
• mt-1：给地址图标添加上边距，让它和文本第一行的基线对齐更自然
• 文本区域无需额外样式，换行时会自动在图标的右侧区域排列，保持与首行619的对齐

方案二：使用文本缩进 #

通过自定义缩进样式，强制换行后的文本对齐首行文本的起始位置：

<div class="col-lg-3 col-md-6">
    <h5 class="text-light mb-4">Stay in contact</h5>
    <p class="ps-4" style="text-indent: -1.25rem;">
        <i class="fa fa-map-marker-alt me-3"></i>619 Otaroad-north-Sidrac, New York, New York 291290
    </p>
    <p><i class="fa fa-phone-alt me-3"></i><a href="tel:213-622-1212">213-622-1212</a></p>
    <p><i class="fa fa-envelope me-3"></i><a href="mailto:bob@bob.usa">bob@bob.usa</a></p>
</div>

• ps-4：给<p>添加左侧内边距，预留图标的宽度空间
• text-indent: -1.25rem：让首行文本向左偏移，抵消图标的me-3（0.75rem）带来的间距，使首行文本对齐容器左侧，换行后的文本则会在ps-4的内边距位置开始排列

为什么你之前的方法无效？ #

替换<p>为<span>并添加word-wrap: break-word仅能实现文本换行，但没有解决缩进对齐的核心问题——换行后的文本依然会默认对齐容器左边缘，而非首行文本的起始位置。

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