嵌套跨度包裝

我正在製作配方網站，並希望保留已添加到列表中的配料清單。我在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/ –

看起來就是這樣做的。我並不擔心過時的瀏覽器，所以這個修復應該很好。非常感謝！ –

回答