Diana Ruth Diana Ruth - 5 months ago 19
CSS Question

Nested span wrapping

I'm making a recipe website and want to keep a list of ingredients that have been added to the list. I'm using a span element with both text and a font awesome icon inside the span. The problem is that when the end of the container is reached, the span will break between the text and the icon rather than between span elements. My span elements are nested like this:

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


I want the elements to stay inside the column but not break between the icon and the text. I also do not want them all on separate lines, as that would waste space. Here is a fiddle demonstrating my problem: https://jsfiddle.net/Lccduy5m/3/

I'm really stumped on this, so any help is greatly appreciated!

Answer

add white-space: nowrap; or you could use display: inline-block; to .element you can see it working here: https://jsfiddle.net/xLf4zm6j/