Ich mache eine Rezeptwebseite und möchte eine Liste der Zutaten behalten, die der Liste hinzugefügt wurden. Ich benutze ein span-Element mit Text und einem tollen Icon innerhalb der Spannweite. Das Problem ist, dass wenn das Ende des Containers erreicht wird, die Spanne zwischen dem Text und dem Symbol und nicht zwischen den Span-Elementen unterbrochen wird. Meine Spanne Elemente sind wie folgt verschachtelt:Verschachteltes Spannen
<span class="element"><i class="fa fa-times"><span>eggs</span></span>
ich die Elemente wollen innerhalb der Säule bleiben, aber nicht brechen zwischen dem Symbol und dem Text. Ich will auch nicht, dass sie alle auf getrennten Linien stehen, denn das würde Platz verschwenden. Hier ist eine Geige, die mein Problem demonstriert: https://jsfiddle.net/Lccduy5m/3/
Ich bin wirklich ratlos auf diese, so dass jede Hilfe sehr geschätzt wird!
Da ich versucht hatte, dass vor und scheiterte ich, um mit ihm gespielt und bemerkte etwas seltsam ..., wenn die Spannweite alle Elemente sind auf ihrer eigenen Linie funktioniert es, aber wenn sie auf der gleichen Linie sind, tut es nicht. [https://jsfiddle.net/zk4vke58/1/](https://jsfiddle.net/zk4vke58/1/) Irgendein Weg, um das zu beheben? –
eine Alternative ist '.element' ist' display: Inline-Block; 'jedoch IE7 und darunter wird nicht standardmäßig unterstützt https://jsfiddle.net/vbb5anaf/ –
Sieht aus wie das den Trick gemacht hat. Und ich mache mir keine Sorgen über veraltete Browser, daher sollte diese Lösung gut sein. Vielen Dank! –