DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die word-spacing Eigenschaft ist ähnlich wie letter-spacing, obwohl sie naturgemäß den Abstand zwischen den Wörtern in einem Text regelt, nicht den Abstand zwischen einzelnen Zeichen.
.element {
word-spacing: .75em;
}word-spacing kann drei verschiedene Werte annehmen
- das Schlüsselwort „normal“, das den Standardabstand wiederherstellt
- Längenwerte mit beliebigen CSS-Einheiten (am häufigsten px, em, rem)
- das Schlüsselwort „inherit“, das die
word-spacingdes übergeordneten Elements anwendet
Die beste Praxis derzeit wäre die Verwendung von em. Die Schriftgröße kann angepasst werden, daher könnte die Verwendung von Pixeln hier Probleme verursachen, da der Abstand zwischen den Wörtern nicht mit ihrer Größe skaliert. rem ist normalerweise großartig, aber die Browserunterstützung ist geringer, und in diesem Anwendungsfall ist es wahrscheinlich am besten, wenn der Abstand direkt auf die Wörter bezogen ist, auf die er angewendet wird, und nicht auf das Root-Element.
Es ist wichtig zu beachten, dass „Wort“ in diesem Zusammenhang tatsächlich ein einzelnes Stück Inline-Inhalt bedeutet – das heißt, word-spacing beeinflusst inline-block Elemente sowie inline Elemente. In diesem Beispiel werden mehrere solcher Elemente durch Setzen der word-spacing ihres übergeordneten Containers beabstandet.
Erwähnenswert…
- Die
word-spacingEigenschaft ist mit CSS Transitions animierbar. - Obwohl die Verwendung des „Prozent“-Werts zur Bestimmung des Abstands gemäß Spezifikation zulässig ist, kann dies zu unvorhersehbaren Ergebnissen führen – oft überhaupt keiner Wirkung.
- Das Setzen von white-space auf null ist eine der Möglichkeiten, um den Abstand zwischen Inline-Block-Elementen zu bekämpfen.
Ich bemerke ein Problem beim Versuch, eine Überschrift mit word-spacing zu zentrieren.
In FF verhält sich dies wie erwartet: tatsächliche Zentrierung mit großem Abstand zwischen den Wörtern. In Chrome scheint es den Abstand auf den Anfang des ersten Wortes anzuwenden, wodurch der Text an die rechte Seite des Kastens gedrängt wird. In Safari scheint
text-align: centerkomplett ignoriert zu werden.Alle Screenshots von aktuellen Browserversionen unter OS X (10.8.4). Gibt es eine Umgehungslösung für diese Inkonsistenz oder muss ich mich damit begnügen, dies mit manuellem Abstand zu beheben?
Bildschirmfoto Fenster
Anscheinend wurde das Bild nicht eingebettet… Screenshots hier.
Das Setzen von word-spacing auf null, um den Abstand zwischen inline-block-Elementen zu entfernen, hatte bei mir keine Wirkung. Jeder andere Wert außer null funktionierte. Also versuchte ich herauszufinden, welchen negativen em-Wert ich verwenden musste.
Anscheinend entfernt -0.25em den Standardleerzeichen zwischen Blöcken.
Cool, danke, aber gibt es eine Möglichkeit, den Abstand zwischen Buchstaben zu erhöhen, nicht zwischen Wörtern?
Sie haben eine Seite dafür.
https://css-tricks.de/almanac/properties/l/letter-spacing/http://www.w3schools.com/cssref/pr_text_letter-spacing.asp Gern geschehen.
„Dieser Wert gibt den Abstand zwischen Wörtern an, **zusätzlich** zum Standardabstand zwischen Wörtern. Werte können negativ sein, aber es kann implementierungsspezifische Einschränkungen geben.“
http://www.w3.org/wiki/CSS/Properties/word-spacing
Zustimmung. Und tatsächlich ist der Standard (oder normale) Wortabstand 0,25em (http://webtypography.net/2.1.1). Ich habe es mit den wichtigsten Browsern getestet (Chrome/Firefox/Safari/IE), sie haben alle Standardwerte von 0,25em. Wenn Sie word-spacing auf -0,25em setzen, führt dies zu keinem Abstand zwischen den Wörtern (alle Wörter werden aneinandergehängt). Wenn Sie ihn geringer als das setzen, z. B. -1em, überlappen die meisten Browser Wörter, außer IE (ich habe es unter 11 getestet), das keinen Abstand lässt, anstatt zu überlappen.
function dsd(){
jdflksdlf.slkfjsdi = ” nichts “;
}
In meinem Firefox scheint negativer word-spacing keine Überlappung von Inline-Blöcken zu verursachen (es führt immer noch zu Überlappung von Wörtern). Wenn dies in den meisten Browsern funktioniert, ist es das Beste.
Hallo. Ich habe ein Navigationsmenü. Wie kann ich den Abstand zwischen „About us“ entfernen, wenn ich word-spacing: 2em setze? Ich möchte 2em Abstand zwischen den Wörtern contact und about, nicht zwischen About und us. Danke.
Ich versuche, zusätzlichen Abstand zwischen zwei Wörtern innerhalb eines Satzes in einem E-Book einzufügen.
Beispiel (AGE NONE) Ich möchte keinen zusätzlichen Abstand zwischen anderen Wörtern im Satz. Ich bekomme das derzeit hin, indem ich den en-Leerzeichen-Code dreimal einfüge. Ich frage mich nur, ob es einen besseren Weg gibt, dies zu tun?
Ich habe festgestellt, dass dies in ausgewählten Dropdown-Listen nicht funktioniert. Die Select-Optionen werden von word-spacing nicht beeinflusst.