Ich habe eine <div> mit fest codierter Breite. Innerhalb des <div> befinden sich mehrere hundert <span> -Tags. Kann ich die Spannen so einwickeln, dass der Zeilenabstand korrekt ist und die Spannen zwischen Spannen sind? Ich benutze word-wrap: break-word und es sieht sehr unordentlich aus.
Hier ist Pseudocode.
%Vor%Danke!
EDIT zur Klarstellung: Es sollte mehrere Spannen in jeder Zeile geben, und das Wrapping sollte zwischen Spannen sein.
BEARBEITEN (2017): Flexbox with wrap display: flex; flex-wrap: wrap ist kompatibel mit IE10 + (und Android 4.4+) und erlaubt vielseitige Ausrichtungen sowohl horizontal (ausgerichtet, nach links oder rechts ausgerichtet, space-around , zentriert) als auch vertikal ( align-items ) mit einem vielseitigen Zeilenabstand ( align-content ... wenn im Allgemeinen eine Höhe eingestellt ist).
Bonus: keine ~ 4px Leerzeichen zwischen den zu betreuenden Elementen wie bei inline-block . Sie tun ziemlich genau was Sie wollen: kein Gutter, flex: 1 1 auto oder padding: 1rem zum Beispiel
Cheatsheet für Flexbox auf CSS Tricks
/ BEARBEITEN
Wenn ich Ihr Problem gut verstanden habe, wollen Sie so viele Spannen pro Linie, die passen, aber keine Spannen beginnen in einer Linie und enden in einer anderen Linie?
Dann die folgende Geige: Ссылка wird den Trick machen. Probieren Sie
Wenn Sie also möchten, dass all diese Spannen eine Zeile für sich nehmen (das ist, was ich verstehe), sollten Sie <p> s oder <li> s und nicht Spannen verwenden. Dann können Sie die Zeilenhöhe verwenden, um den Abstand zwischen den Zeilen zu steuern.
Verdammt, du könntest sogar <br> s benutzen, um deine Zeilen zu brechen.
Eine andere Methode wäre, Ihre Spannen display:block zu setzen, so dass sie eine Zeile überspringen, wenn sie enden.
Versuchen Sie es mit dem Display: Block; innerhalb der CSS. Passen Sie dann den Rand / Abstand für den erforderlichen Abstand an.
Versuchen Sie, die Spanne wie ein div zu gestalten?
Wenn ja, könnten Sie Folgendes verwenden:
%Vor%Beispiel:
Der schnellste, aber nicht perfekte Weg ist die Verwendung von span { white-space: nowrap } . Natürlich, wenn die <span> Breite über die <div> Breite hinausgeht, werden Sie Probleme haben. Sie müssen entweder <div> scrollbar machen oder JavaScript verwenden, um dieses Szenario zu beheben.
Die anderen Optionen display mit white-space in der CSS-Spezifikation sind nicht browserübergreifend genug, um so zu funktionieren, wie Sie es möchten.