Frage

Gibt es eine Alternative für bikeshedding CSS3 -Eigenschaft? Es scheint noch nicht unterstützt zu werden.

War es hilfreich?

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:

  1. normal (Der Anfangswert).
  2. 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.

http://jsfiddle.net/rt4dy/2/

$('[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.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top