如何让长标题换行后第二行对齐标题首字母而非图标

云上老周

2026-8-4

实现图标与标题并排且换行后对齐首字母

我需要让图标与标题并排展示，但当前标题内容过长换行时，第二行会从图标下方开始，而非标题首字母下方，想要实现长标题换行后对齐标题首字母的效果。

标题换行对齐问题示例

解决方案

可以通过两种CSS布局方式实现需求，以下是具体修改代码：

方法一：Flex布局（推荐）

修改后的HTML结构：

<div className="notAcceptingPatients col-med-6">
  <h6 className="font-weight-bold text-dark title-with-icon">
    <i class="fa fa-info-circle"></i>
    <span>This Dental Clinic is not accepting new patients at this time</span>
  </h6>
  <p className="notAcceptingPatients-text">
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

对应的CSS样式：

.notAcceptingPatients {
  padding: 11px;
  background: rgba(219, 88, 88, 0.1);
  border-radius: 8px;
}

.title-with-icon {
  display: flex;
  align-items: flex-start; /* 图标与文本顶部对齐 */
  gap: 6px; /* 图标与标题文本的间距 */
}

.title-with-icon i {
  color: #D14444;
  font-size: 23px;
  flex-shrink: 0; /* 防止图标被压缩变形 */
}

.notAcceptingPatients-text {
  margin: 2px 0;
  font-size: 15px;
  color: $black;
  line-height: 19px;
  font-weight: 400;
  margin-left: 29px; /* 与图标宽度+间距保持一致，让正文对齐标题首字母 */
}

方法二：浮动布局

如果不使用Flex，也可以用浮动实现：

.title-with-icon {
  overflow: hidden; /* 清除浮动，避免父元素高度塌陷 */
}

.title-with-icon i {
  float: left;
  color: #D14444;
  font-size: 23px;
  margin-right: 6px;
}

.notAcceptingPatients-text {
  margin: 2px 0;
  font-size: 15px;
  color: $black;
  line-height: 19px;
  font-weight: 400;
  margin-left: 29px;
}