問題
在一段文字後面需要接一個 SVG icon，例如「外部連結 icon」或「提示 icon」。
希望達到的效果是：
- SVG 緊貼在最後一個字後面
- 文字換行時，icon 跟著最後一個字
- icon 不會跑到下一行開頭
例如希望呈現：
這是一段很長的文
字 🔗
而不是：
這是一段很長的文
字
🔗
問題範例
<span class="text">
這是一段很長的文字
<svg class="icon" width="16" height="16">
<circle cx="8" cy="8" r="8" />
</svg>
</span>
有些人會嘗試使用 flex 或 inline-flex：
.text {
display: inline-flex;
}
但當文字換行時，icon 可能會被排到 下一行開頭，造成 icon 與文字分離。
為什麼會發生這個問題？
因為 flex 會把內容拆成 flex items：
[text node] [svg]
當空間不足時，瀏覽器可能會把 整個 svg item 移到下一行，而不是把它當作文字的一部分。
正確做法
讓 SVG 保持 inline 排版，讓瀏覽器使用 文字流排版（inline formatting context）。
.icon {
display: inline;
vertical-align: text-bottom;
margin-left: 0.1em;
}
完整範例：
<span class="text">
這是一段很長很長很長很長很長很長很長的文字
<svg class="icon" width="16" height="16">
<circle cx="8" cy="8" r="8"/>
</svg>
</span>
.icon {
display: inline;
vertical-align: text-bottom;
margin-left: 0.15em;
}
效果：
這是一段很長很長很長很長很長很長
的文字 🔗
SVG 會自然貼在最後一個字後。
為什麼 SVG 可以 display: inline？
1. SVG 在 HTML 中預設就是 inline element
在瀏覽器預設樣式中：
svg {
display: inline;
}
所以 SVG 可以直接出現在文字中，例如：
文字 <svg></svg> 文字
瀏覽器會把它當作一個 inline box。
2. inline 元素會參與文字排版（inline formatting context）
當元素是 display: inline：
- 會跟文字一起排列
- 會跟著文字換行
- 不會強制換行
排版概念其實是：
[字][字][字][svg]
SVG 在排版中就像一個「字元」。
3. SVG 屬於 replaced element
SVG 與 <img> 類似，屬於 replaced element：
特性：
- 內容由外部資源決定
- 有 intrinsic size
- 可以像圖片一樣嵌入文字流
例如：
文字 <img src="icon.png">
文字 <svg>...</svg>
這兩種在排版上非常相似。
為什麼 icon 會貼在最後一個字？
在 inline 排版中，瀏覽器會：
- 從左到右填滿一行
- 空間不足才換行
所以排版順序會是：
文字文字文字[svg]
如果空間足夠：
文字文字文字🔗如果空間不足：
文字文字文字
🔗
因此 SVG 會自然跟在最後一個字後面。
結論
如果希望 icon 像文字一樣跟著排版：不要使用 flex 保持 inline 排版
因為：
- inline 元素會參與 文字流排版
- SVG 會被當作 字元盒 (inline box) 處理
- 因此可以自然貼在最後一個文字後方
讓 SVG 保持 display: inline，它就會像文字一樣參與排版，並自然接在最後一個字後面。
.icon {
display: inline;
}
