我有一個標題，后面跟著一個圖標，排列在同一行，如下所示:

<div class="outer-container">
 <h1 class="article-header">Sample Short Headline</h1>
 <object class="link-svg" type="image/svg+xml" data="./resources/link.svg" width="30px" height="30px"></object>
</div>

我將這兩個元素都設置為內聯塊元素，這就是我如何讓它們保持在同一行的方法。如果標題長于一行，那么多行文本將占據整個水平寬度，不管文本是否是行內塊。

這將導致圖標被推到下一行，即使換行文本的最后一行有足夠的可用空間:

理想情況下，我希望被包裝的文本表現得好像每個單詞都是一個內聯塊元素，這樣鏈接就可以像下面這樣與文本一起包裝:

現在我真的可以這樣做了，把每個單詞放在它自己的內聯塊容器中，這樣它就可以這樣工作了，但是這感覺很糟糕，而且對于不同長度的標題，必須手動完成。

這看起來是一個簡單的特性，我想有一個更好的解決方案，包括一些類型的包裝屬性。有沒有簡單的方法可以做到這一點？

# # #將最后一個單詞和圖像用& ltspan & gt并設置空白:nowrap：

.article-header span {
  white-space: nowrap;
}

<h1 class="article-header">
  Sample Short Sample Short Sample
  <span>
    Headline
    <svg width="20" height="20" viewBox="0 0 20 20">
      <line x1="0" y1="10" x2="20" y2="10" stroke="currentColor"/>
      <line x1="10" y1="0" x2="10" y2="20" stroke="currentColor"/>
    </svg>
  </span>
</h1>

# # #可以只添加display:inline；到你的標題文字h1元素，圖標會粘在最后一個字上。 這里有一個例子:

h1 {
  display: inline;
}

<div class="outer-container">
 <h1 class="article-header">Sample Long Headline to See How it will behave with multiple lines</h1>
 <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
</div>