### [SVG 图标排在文字里：换行与对齐](https://www.huociguo.com/article/1599)

**Published:** 2026-10-01T10:42:32

**Author:** 米了

**Excerpt:** 把 SVG 图标与文字混排在同一行时，常见两类偏差：图标把行高顶开，或者图标与相邻的词被拆到两行。两件事分别由…

把 SVG 图标与文字混排在同一行时，常见两类偏差：图标把行高顶开，或者图标与相邻的词被拆到两行。两件事分别由 display 与断行规则决定。

![屏幕上高亮的彩色编程代码](https://api.huociguo.com/wp-content/uploads/2026/10/d13.jpg)

图标与文字的混排细节集中在行内布局

## 让图标进入文本流

SVG 未按行内级参与布局时会独占一行。显式声明显示类型并给出尺寸即可进入文本流。

```
.icon {
  display: inline;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
```

宽高用 em 跟随字号，图标与文字同步缩放。`vertical-align` 取负值时图标下沉，用于对齐基线偏低的字形。

## 对齐取值的差别

| 取值  | 效果  | 适用场景 |
| --- | --- | --- |
| baseline | 图标底边对齐文字基线 | 常规混排 |
| middle | 图标垂直中心对齐 x 高度中心 | 与短标签并列 |
| \-0.125em | 相对基线做微调 | 字形下沉明显的字体 |

## 控制断行位置

图标与相邻词之间使用普通空格时，浏览器可以在该处断行。把空格换成不换行空格，两段内容就绑定成一个整体。

```
<p>下载<svg class='icon' aria-hidden='true'></svg>&#160;PDF</p>
```

需要禁止断行时用 U+2060 连接符放在两者之间；需要保留断行能力又不留可见符号时用零宽空格 U+200B。

## 行高被顶开的处理

图标高度超过父级行高时会把整行撑开。给图标设置 `max-height: 1em`，并让父级 `line-height` 取固定值，段落行距就不会出现参差。

## 装饰性图标移出文本流

纯装饰图标用 `background-image` 配合 `padding-left` 更省事，不参与文本流，换行与行高都不受影响，代价是无法用 currentColor 继承文字颜色。

## 检查清单

-   显式声明显示类型与尺寸，不要依赖 SVG 的默认行为。
-   尺寸用 em 表达，保证随字号缩放。
-   图标与相邻词之间使用受控的空格字符。
-   无语义价值的图标考虑移出文本流并标记 aria-hidden。

**Tags:** SVG图标, vertical-align, 文本换行, 行内元素, 零宽连接符

**Categories:** HTML5

---