0
Я делаю сайт рецептов и хочу сохранить список ингредиентов, которые были добавлены в список. Я использую элемент span с текстом и шрифтом, удивительным значком внутри пролета. Проблема в том, что когда конец контейнера достигнут, пролет будет разбиваться между текстом и значком, а не между элементами диапазона. Мои пролетных элементы вложены как это:Вложенная упаковка обертывания
<span class="element"><i class="fa fa-times"><span>eggs</span></span>
Я хочу, чтобы элементы, чтобы остаться внутри колонны, но не ломаются между иконкой и текстом. Я также не хочу, чтобы все они были на отдельных линиях, поскольку это было бы ненужным пространством. Вот скрипка, демонстрирующая мою проблему: https://jsfiddle.net/Lccduy5m/3/
Я действительно в тупике, поэтому любая помощь очень ценится!
Так как я пытался, что раньше и не удалось, я играл с ним и заметил что-то странное ... когда пролетные элементы являются все на их собственной линии это работает, но когда они находятся на одной линии, это не так. [https://jsfiddle.net/zk4vke58/1/](https://jsfiddle.net/zk4vke58/1/) Любой способ исправить это? –
альтернативой является '.element' is' display: inline-block; 'однако IE7 и ниже не будут поддерживаться по умолчанию. Https://jsfiddle.net/vbb5anaf/ –
Похоже, что это сделал трюк. И меня не беспокоят устаревшие браузеры, поэтому это исправление должно быть хорошим. Спасибо! –