Wortumbruch - CSS-Tricks

Anonim

Die word-breakEigenschaft in CSS kann verwendet werden, um zu ändern, wann Zeilenumbrüche auftreten sollen. Normalerweise können Zeilenumbrüche im Text nur in bestimmten Leerzeichen auftreten, z. B. wenn ein Leerzeichen oder ein Bindestrich vorhanden ist.

Im folgenden Beispiel können wir word-breakstattdessen die Zwischenbuchstaben eingeben:

p ( word-break: break-all; )

Wenn wir dann die Breite des Textes auf eins setzen em, wird das Wort durch jeden Buchstaben unterbrochen:

Siehe den Text für die Stifteinstellung vertikal mit Wortumbruch durch CSS-Tricks (@ css-Tricks) auf CodePen.

Dieser Wert wird häufig an Orten mit benutzergenerierten Inhalten verwendet, damit lange Zeichenfolgen nicht das Layout beschädigen können. Ein sehr häufiges Beispiel ist eine lange Kopie und eine eingefügte URL. Wenn diese URL keine Bindestriche enthält, kann sie über das übergeordnete Feld hinausgehen und schlecht oder schlechter aussehen und Layoutprobleme verursachen.

Siehe die Links zur Stiftfixierung mit Wortumbruch durch CSS-Tricks (@ css-Tricks) auf CodePen.

Werte

  • normal: Verwenden Sie die Standardregeln für das Brechen von Wörtern.
  • break-all: Jedes Wort / jeder Buchstabe kann in die nächste Zeile übergehen.
  • keep-all: für Chinesisch, Japanisch und Koreanisch werden Textwörter nicht gebrochen. Ansonsten ist dies dasselbe wie normal.

Diese Eigenschaft wird auch häufig in Verbindung mit der Eigenschaft Bindestriche verwendet, sodass bei Unterbrechungen ein Bindestrich gemäß dem Standard in Büchern eingefügt wird.

Die vollständige Verwendung mit den erforderlichen Herstellerpräfixen lautet:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Die Verwendung dieser Eigenschaften in der universellen Auswahl kann hilfreich sein, wenn Sie eine Site mit vielen benutzergenerierten Inhalten haben. Obwohl faire Warnung, kann es auf Titeln und vorformatiertem Text seltsam aussehen (

).

verbunden


    

  • Überlaufverpackung
    • 

  • Bindestriche
    • 

  • Leerraum
    • 

  • Umgang mit langen Wörtern und URLs
    • 



Browser-Unterstützung


Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.


Desktop


 

 

 Chrom Feuerfuchs IE Kante Safari 


 

 

 

 23 49 11 18 6.1 


 

 



Handy / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 4.4 7.0-7.1 


 

 



Safari und iOS unterstützen den break-allWert aber nichtkeep-all