如何让换行文本的最后一行与图标按inline-block方式排布？

方案1：将图标嵌入标题内部 #

这是最直观的实现方式，把图标放到标题标签内部，让它和文本处于同一行流中，文本换行时图标会自动跟在最后一行末尾。

HTML代码：

<div class="outer-container">
  <h1 class="article-header">Sample Long Headline That Will Wrap Around The Container 
    <object class="link-svg" type="image/svg+xml" data="./resources/link.svg" width="30px" height="30px"></object>
  </h1>
</div>

CSS代码：

.outer-container {
  /* 根据需求设置容器最大宽度 */
  max-width: 400px;
}
.link-svg {
  display: inline-block;
  vertical-align: middle; /* 让图标与文本垂直居中对齐 */
  margin-left: 8px; /* 可选：给图标和文本添加间距 */
}
.article-header {
  margin: 0; /* 清除h1默认外边距 */
}

方案2：保留原结构，修改CSS显示属性 #

如果不想调整HTML结构，可以通过修改元素的显示属性，让标题和图标处于同一行流：

HTML代码（保持你原有的结构）：

<div class="outer-container">
  <h1 class="article-header">Sample Long Headline That Will Wrap Around The Container</h1>
  <object class="link-svg" type="image/svg+xml" data="./resources/link.svg" width="30px" height="30px"></object>
</div>

CSS代码：

.outer-container {
  max-width: 400px;
}
.article-header {
  display: inline; /* 将h1从块级改为行内元素，不再独占整行 */
  margin: 0;
}
.link-svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

以上两种方法都能避免手动拆分单词的hack操作，轻松实现标题换行时图标跟随最后一行的效果。

内容的提问来源于stack exchange，提问作者Sam Sabin