trailing-icon-alignment

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Trailing Icon Alignment

末尾图标对齐

Ensures trailing icons always remain visually attached to the last line of text when the text wraps, preventing the icon from being orphaned on a new line.

确保文本换行时，末尾图标始终视觉上附着在文本的最后一行，避免图标孤立到新的一行。

Rules

规则

MUST: Use
```
relative inline-block
```
on the container element
MUST: Use padding-right (
```
pr-5
```
or equivalent) to reserve space for the icon
MUST: Use
```
absolute inline
```
positioning on the SVG icon
MUST: Use height on the SVG that matches the line height of the text (
```
h-6
```
or equivalent)
NEVER: Place the icon as a flex sibling or block-level sibling — it will not wrap with the text

必须：在容器元素上使用
```
relative inline-block
```
必须：使用右内边距（
```
pr-5
```
或等效样式）为图标预留空间
必须：在SVG图标上使用
```
absolute inline
```
定位
必须：为SVG设置与文本行高匹配的高度（
```
h-6
```
或等效样式）
禁止：将图标作为flex同级元素或块级同级元素——这样图标无法随文本换行

Implementation

实现

html

<a href="/" class="relative inline-block pr-5">
  View documentation
  <svg
    class="absolute ml-1 inline h-lh w-4 shrink-0"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M7 7h10v10" />
    <path d="M7 17 17 7" />
  </svg>
</a>

html

<a href="/" class="relative inline-block pr-5">
  View documentation
  <svg
    class="absolute ml-1 inline h-lh w-4 shrink-0"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M7 7h10v10" />
    <path d="M7 17 17 7" />
  </svg>
</a>

Key Points

关键点

```
inline-block
```
on the container causes the trailing padding and icon to stay attached to the last word, wrapping together as a unit
```
pr-5
```
(padding-right) must be at least as wide as the icon (
```
w-4
```
) to prevent text overlap
```
absolute
```
positions the icon within its container;
```
inline
```
keeps it participating in the text flow
This approach prevents the icon from being orphaned on a new line at narrow widths

容器上的
```
inline-block
```
使末尾内边距和图标与最后一个单词绑定，作为一个整体换行
```
pr-5
```
（右内边距）的宽度必须至少与图标（
```
w-4
```
）相同，以防止文本重叠
```
absolute
```
将图标定位在容器内部；
```
inline
```
使其保持参与文本流
这种方法可防止在窄宽度下图标孤立到新行