Bikeshedding CSS3 Immobilienalternative?
Frage
Gibt es eine Alternative für bikeshedding
CSS3 -Eigenschaft? Es scheint noch nicht unterstützt zu werden.
Lösung
Das Weiß-Raum-Eigentum
In CSS3 die white-space
Eigentum ist eine Abkürzung für die white-space-collapsing
(Ich vermute bikeshedding
bedeutet, dass sie noch nicht wissen, wie sie es nennen sollen) und text-wrap
Eigenschaften. Das white-space
Eigenschaft ist eine CSS 2.1 -Eigenschaft, die von den meisten Browsern unterstützt wird, und es gibt zwei Werte dafür, die neue Linien zusammenbrechen:
normal
(Der Anfangswert).nowrap
Aber was bedeutet zusammenfallende Zeilenfutterzeichen?
Nach CSS 2.1:
Wenn 'weißer Raum' auf 'normal' oder 'nowrap' eingestellt ist, werden LineFeed-Zeichen für den Rendern von Zweck in eines der folgenden Zeichen umgewandelt: ein Space-Charakter, ein Space-Charakter von Null Breite (U+200b) oder kein Zeichen (kein Zeichen (kein Zeichen (kein Zeichen (kein Zeichen dh nicht gerendert) gemäß UA-spezifischen Algorithmen basierend auf dem Inhaltskript.
Nach CSS 3:
Ein Null -Breitenraum vor oder nach einer weißen Raumsequenz, die eine neue Linie enthält, bewirkt, dass die gesamte Reihenfolge des weißen Raums in einen Space Null Breite zusammenbricht.
Wirklichkeit:
Die meisten Browser verwandeln Linien -Feed -Zeichen in a Platz. Also, was Sie wirklich wollen, ist, das zu setzen white-space-collapsing
Eigentum an discard
nicht collapse
oder zu collapse
und fügen Sie dann einen Space -Zeichen der Breite hinzu, bevor der Linienbriss brechen.
Was tun bis zum Browserunterstützung
Entfernen Sie den weißen Raum aus Ihrem HTML-Dokument:
<span>A</span>
<span>B</span>
Zu:
<span>A</span><span>B</span>
Oder:
<span>A</span><span>
B</span>
Andere Tipps
Es gibt immer die offensichtlichste Lösung, nämlich einfach die Whitespace im HTML zu entfernen:
http://jsfiddle.net/f3mdd/1/ - Es ist wirklich einfach und funktioniert einfach. Davon:
<div>a</div>
<div>a</div>
dazu:
<div>a</div><div>a</div>
Hier ist eine detailliertere Antworten.
Um ehrlich zu sein, entferne ich immer nur die Whitespace ...
Ein anderer Ansatz besteht einfach darin, auf diese CSS3 -Funktion zu warten und die Whitespace bis dahin durch JavaScript zu entfernen.
$('[data-bikeshedding="discard"]').each (function () {
var node = $(this);
node.html (node.find ('> *').detach ());
});
Wenn ich Sie richtig verstehe, meinen Sie das text-spacing
Eigentum.
Soweit ich sagen kann, Es gibt nicht viel Unterstützung.