如何让表格行内长文本与Font Awesome图标始终显示在同一行？

方案一：强制内容不换行（适合短文本场景） #

如果希望文本和图标始终保持在同一行，即使文本较长时截断显示，给包含内容的<span>添加以下CSS：

span {
  white-space: nowrap; /* 禁止内容换行 */
  overflow: hidden;    /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 可选：超出部分显示省略号 */
}

这种方式会让图标和文本牢牢绑定在一行，不会出现换行分离的情况。

方案二：文本可换行，图标始终跟随最后一行（推荐） #

如果需要文本正常换行，同时图标始终跟在文本的最后一行右侧，使用Flex布局：

span {
  display: flex;
  flex-wrap: wrap; /* 允许内容换行 */
  align-items: center; /* 垂直居中对齐文本和图标 */
}
span i.fa-pencil {
  flex-shrink: 0; /* 防止图标被压缩变形 */
  margin-left: 3px; /* 替代padding-left，确保间距稳定 */
}

Flex布局会自动调整内部元素的排列，文本会根据容器宽度换行，而图标会始终附着在文本的末尾，不会被单独挤到下一行。

原因说明 #

出现这个问题的核心是：默认情况下<span>是inline元素，内部的文本和图标都属于inline/inline-block类型，当容器（<td>）宽度不足时，浏览器会自动在文本末尾换行，导致图标被挤到新行。通过修改布局方式（强制不换行或使用Flex），就能解决这个问题。

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