html - 包装时如何将单词和 Font Awesome 图标视为一个？

Question

我有一个导航，其末尾有一个 Font Awesome 箭头，当页面缩小时，换行使箭头出现在下面的行上(如 Codepen 中所示)。

我希望最后一个词和箭头被视为一个对象，所以如果宽度上没有足够的空间容纳箭头，那么最后一个词会随着箭头向下跳吗？

你会如何处理这个问题？

谢谢!

http://codepen.io/b-d-m-p/pen/dPPzod?editors=110

<div class="box">
  <ul>    
    <li>
      <a>This way<i class="fa fa-chevron-right"></i></a>
    </li>
  </ul>
</div>

这是CSS:

.box{
  width: 110px;
  border: dashed gray 1px;
    a{
        color: gray;
    }
}

Answer 1

使用这个:

<a>This <span style="white-space: nowrap">way<i class="fa fa-chevron-right"></i></span></a>

这将使图标和单词换行到下一行，而不是单词“this”。

希望这对您有所帮助!