如何在包装时将单词和字体真棒图标视为一个？

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>

这会使图标和单词换行到下一行，而不是单词＆＃34;这＆＃34;。

希望这有帮助！

Answer 2

只需应用white-space:nowrap;

即可

.box{
  width: 110px;
  border: dashed gray 1px;
    a{
        color: gray;
        white-space: nowrap;
    }
}

根据评论：

您可以将它们包裹在一个范围内并应用空格：nowrap到span：

<a>This <span>way<i class="fa fa-chevron-right"></i></span></a>