CSS erzwingt den Zeilenumbruch. Wie schließe ich Wörter in CSS ein, die nicht in einen Block passen? Was ist der Unterschied zwischen einer Immobilie und einer anderen?

Automatische Silbentrennung schwerfälliger Wörter (ohne Hinzufügung von Bindestrichen).

Interessierte Immobilienwerte:

  • Alles kaputt machen
    Automatische Übertragung alle Wörtern sieht der Text so aus, als wäre er in der Breite ausgerichtet.
  • Umbruchwort (wird auf dieser Website in Überschriften verwendet)
    Übertragung einzelner Wörter, die nicht in die vorgegebene Blockbreite passen.

Strahlende Zukunft. Bindestriche für CSS-Eigenschaften

Die Silbentrennungsregeln werden durch das im Browser integrierte Wörterbuch bestimmt. Die Eigenschaft funktioniert, wenn auf der Ebene des gesamten Dokuments oder seiner einzelnen Teile ein lang-Attribut mit einem Sprachcode vorhanden ist.

Interessante Werte:

  • manuell (Standard)
    Wörter werden nur an den Stellen im Text getrennt, an denen das Sonderzeichen ­ (weicher Bindestrich) oder Tag hinzugefügt wird . Sonderzeichen werden manuell in den Text eingefügt und sind in nicht sichtbar Klartext und wenn das Wort nicht passt, erstellt der Browser einen Bindestrich an der Stelle des Sonderzeichens. Das Sonderzeichen ­ fügt beim Trennen eines Wortes einen Bindestrich hinzu (wie es in der Schule gelehrt wird), das Tag jedoch nicht.
  • Auto
    Der Browser fügt Bindestriche automatisch basierend auf dem integrierten Wörterbuch hinzu. Die Browserunterstützung ist immer noch schwach; sie funktioniert nicht in Chrome(.
...

Programm Programmieren ist der Prozess und die Kunst, Computerprogramme mithilfe von Programmiersprachen zu erstellen.

p (Bindestriche: auto;)

Verbot von Überweisungen

Es gibt die gegenteilige Aufgabe – Übertragungen zu verbieten. Trennen Sie beispielsweise nicht Initialen von Nachnamen oder Maßeinheiten von Werten (100 kg). Um zu verhindern, dass der Browser Bindestriche anstelle des üblichen Leerzeichens hinzufügt, schreiben Sie geschützter Raum 

Außerdem hat die CSS-Eigenschaft „Bindestriche“ den Wert „Keine“, wenn Wörter nicht getrennt werden, selbst wenn der Text weiche Bindestriche enthält.

Das Internet besteht aus Inhalten, Inhalte bestehen aus Wörtern und Wörter können sehr, sehr lang sein. Und früher oder später steht der Webmaster vor dem Problem, lange Wörter zu trennen. Dieses Problem ist besonders relevant für adaptives Design und für kleine Inhaltsblöcke. Wie gehen Sie also mit diesem Problem um?

Bindestrich

Die erste Lösung zum Trennen langer Wörter ist die Verwendung eines Bindestrichs.

Defisi ( -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; )

Browserunterstützung: CSS-Bindestriche werden von fast allen unterstützt moderne Browser, mit Ausnahme von Chrome, Opera, Android. Außerdem wird sehr oft an grammatikalisch falschen Stellen ein Bindestrich eingefügt.

Wortbruch

Wortbruch ist CSS-Eigenschaft, um anzugeben, ob Zeilen innerhalb von Wörtern umbrochen werden sollen.

Obriv-slova ( -ms-word-break: break-all; word-break: break-all; word-break: break-word; )

Browserunterstützung: Wortumbrüche werden in allen Browsern außer Opera Mini und älteren Versionen von Opera unterstützt.

Überlauf-Wrapper

Die nächste Lösung besteht darin, einen Überlauf-Wrap zu verwenden.

Obertka-perepolneniya (Zeilenumbruch: Wortumbruch; Überlaufumbruch: Wortumbruch;)

Browserunterstützung: Wird in fast allen Browsern unterstützt. Hinweis: Einige Browser erfordern die Verwendung von „word-wrap“ anstelle von „overflow-wrap“.

Ellipse

Eine andere Möglichkeit ist die Verwendung von Ellipsen.

Mnogotochiye ( Überlauf: versteckt; Leerraum: Nowrap; Textüberlauf: Auslassungspunkte; )

Browserunterstützung: Unterstützt von allen modernen Browsern.

Diese Methode funktioniert, ist aber alles andere als ideal.

Endgültige Lösung: Verwendung des Overflow- und Hyphen-Wrappers.

Finalnoye-resheniye ( overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )

Diese Lösung ermöglicht einem Browser, der dies unterstützt, das Einfügen eines Bindestrichs und für Browser, die dies nicht unterstützen, das Einfügen eines Zeilenumbruchs.

Die Eigenschaft „Wortumbruch“ gibt an, ob lange Wörter, die nicht in die Breite des angegebenen Bereichs passen, umgebrochen werden sollen oder nicht.

Kurzinfo

Bezeichnungen

BeschreibungBeispiel
<тип> Gibt den Typ des Werts an.<размер>
A && BDie Werte müssen in der angegebenen Reihenfolge ausgegeben werden.<размер> && <цвет>
A | BZeigt an, dass Sie nur einen der vorgeschlagenen Werte (A oder B) auswählen müssen.normal | Small-Caps
Ein || BJeder Wert kann unabhängig oder zusammen mit anderen in beliebiger Reihenfolge verwendet werden.Breite || zählen
Gruppiert Werte.[ Zuschneiden || kreuzen ]
* Null oder mehrmals wiederholen.[,<время>]*
+ Wiederholen Sie dies einmal oder mehrmals.<число>+
? Der angegebene Typ, das Wort oder die Gruppe ist optional.Einsatz?
(A, B)Wiederholen Sie mindestens A, aber nicht mehr als B-Mal.<радиус>{1,4}
# Wiederholen Sie dies einmal oder mehrmals, getrennt durch Kommas.<время>#
×

Werte

normal Zeilen werden nicht umbrochen oder an Stellen umbrochen, an denen der Umbruch explizit angegeben ist (z. B. using
). break-word Zeilenumbrüche werden automatisch hinzugefügt, um sicherzustellen, dass das Wort in die angegebene Blockbreite passt.

Beispiel

Zeilenumbruch

Substantiv

Exzellenz

Substantiv animieren

Elftklässler

chemische Substanz

Methoxychlordiethylaminomethylbutylaminoacridin

Ergebnis dieses Beispiel in Abb. dargestellt. 1.

Reis. 1. Lange Wörter umschließen

Objektmodell

Objekt.style.wordWrap

Spezifikation

Jede Spezifikation durchläuft mehrere Genehmigungsstufen.

  • Empfehlung – Die Spezifikation wurde vom W3C genehmigt und wird als Standard empfohlen.
  • Kandidatenempfehlung ( Mögliche Empfehlung) – Die für den Standard verantwortliche Gruppe ist davon überzeugt, dass sie ihre Ziele erreicht, benötigt jedoch Hilfe von der Entwicklungsgemeinschaft, um den Standard umzusetzen.
  • Vorgeschlagene Empfehlung Vorgeschlagene Empfehlung) – zu diesem Zeitpunkt wird das Dokument dem W3C-Beirat zur endgültigen Genehmigung vorgelegt.
  • Arbeitsentwurf – Eine ausgereiftere Version eines Entwurfs, der zur Überprüfung durch die Community diskutiert und geändert wurde.
  • Entwurf des Herausgebers ( Redaktioneller Entwurf) – eine Entwurfsversion des Standards, nachdem von den Projektredakteuren Änderungen vorgenommen wurden.
  • Entwurf ( Entwurf einer Spezifikation) – die erste Entwurfsversion des Standards.
×