嵌套跨度包装

我正在制作配方网站，并希望保留已添加到列表中的配料清单。我在span中使用了span元素和文本以及字体超棒的图标。问题是当达到容器的末端时，跨度将在文本和图标之间中断，而不是在跨度元素之间。我的span元素是这样嵌套的：嵌套跨度包装

<span class="element"><i class="fa fa-times"><span>eggs</span></span>

我希望元素留在列内但不会在图标和文本之间断开。我也不希望他们全部分开，因为这会浪费空间。这里是一个小提琴演示我的问题：https://jsfiddle.net/Lccduy5m/3/

我真的很难住这个，所以任何帮助，非常感谢！

2016-06-15 Diana Ruth

添加white-space: nowrap;，或者您可以使用display: inline-block;到.element你可以看到它在这里工作：https://jsfiddle.net/xLf4zm6j/

2016-06-15 20:25:37

因为我曾尝试之前和失败我发挥它周围，发现了一些奇怪......当跨度元素都是在他们自己的路线上工作，但是当他们在同一条线路上时，它不会。 [https://jsfiddle.net/zk4vke58/1/](https://jsfiddle.net/zk4vke58/1/）有什么方法可以补救？ –

另一种选择是'.element'是'display：inline-block;'但是IE7和默认不支持https://jsfiddle.net/vbb5anaf/ –

看起来就是这样做的。我并不担心过时的浏览器，所以这个修复应该很好。非常感谢！ –

回答