如何让包含<i>标签的anchor标签内容不换行？

嘿，我明白你遇到的麻烦了——明明加了 ，文字和图标还是换行，这确实挺烦人的。其实问题不在空格上，而是浏览器的换行规则或者容器样式导致的，咱们用CSS就能轻松搞定！

方法1：强制禁止换行（最简单直接） #

给你的.show-more-btn类添加white-space: nowrap样式，强制所有内容在一行显示，不管容器宽度如何：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
    .show-more-btn {
      white-space: nowrap; /* 核心：阻止内容自动换行 */
      /* 可选：加点样式让按钮更美观 */
      padding: 6px 10px;
      text-decoration: none;
      color: #2d3748;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="show-more-btn" href="javascript:void(0);">Read More <i style="font-size:15px;" class="fa fa-chevron-down" aria-hidden="true"></i></a>
</body>
</html>

方法2：用Flex布局（更灵活，还能控制对齐） #

如果你想让文字和图标垂直居中，同时保持在一行，用inline-flex布局是更好的选择，还能轻松控制它们之间的间距：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
    .show-more-btn {
      display: inline-flex; /* 让内部元素在一行排列 */
      align-items: center; /* 垂直居中对齐文字和图标 */
      gap: 5px; /* 控制文字和图标之间的间距，比&nbsp;更可控 */
      /* 可选美化样式 */
      padding: 6px 10px;
      text-decoration: none;
      color: #2d3748;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="show-more-btn" href="javascript:void(0);">Read More <i style="font-size:15px;" class="fa fa-chevron-down" aria-hidden="true"></i></a>
</body>
</html>

为什么 没用？ #

 只是非断空格，它只能阻止空格位置的换行，但如果容器宽度不够，浏览器还是会在其他位置（比如文字和图标之间）自动换行。只有通过CSS强制禁止换行，或者让容器的布局方式支持内容在一行排列，才能彻底解决问题。

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