如何阻止AsciiDoc中FontAwesome图标与后续文本发生换行？

嘿，我完全懂你的痛点——图标和对应的标签被换行分开真的很破坏UI体验！结合你用AsciiDoc+Jekyll+FontAwesome的场景，我整理了几个实用方案，不用大改HTML结构就能解决问题：

• CSS解决方案（最推荐，无需修改AsciiDoc内容）
  浏览器会在图标<span>和文本<strong>之间换行，本质是因为它们是两个独立的行内元素。我们可以用CSS强制让它们绑定在同一行：

  /* 针对图标和相邻的文本标签设置不换行规则 */
  .icon + strong {
    white-space: nowrap;
  }
  /* 可选：让图标和文本垂直对齐更美观 */
  .icon, .icon + strong {
    display: inline-block;
    vertical-align: middle;
  }
  

  如果你想确保整个图标+文本组合完全不换行（哪怕文本很长），可以给它们的父容器（比如<p>标签）加white-space: nowrap;，不过这可能导致长文本溢出，所以更推荐上面的相邻元素选择器方案。

• AsciiDoc语法技巧（直接在文档内处理）
  要是不想碰CSS，你可以调整AsciiDoc的写法，把图标和文本放在同一个格式化块里，生成的HTML会把它们包裹在同一个元素内，自然就不会换行：
  把原来的写法：

  icon:upload[] *Upload files*
  

  修改为：

  *icon:upload[] Upload files*
  

  这样生成的HTML会变成<strong><span class="icon"><i class="fa fa-upload"></i></span> Upload files</strong>，图标和文本同属一个<strong>标签，浏览器就不会在它们之间拆分换行。如果还是担心，可以在图标和文本之间插入AsciiDoc的非换行空格：icon:upload[] +++ +++ Upload files，用+++直接插入HTML的非换行空格，进一步绑定两者。

• 进阶：Jekyll层面的批量处理（可选）
  如果你有大量这类图标+文本组合，可以在Jekyll模板里自定义Liquid标签或过滤器，自动给图标和文本添加不换行的CSS类，但这个方案相对复杂，前面两个方法已经足够解决大部分场景的问题了。

内容来源于stack exchange