CSS/Eigenschaften/Anzeige/overflow-wrap

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft word-wrap bzw. overflow-wrap regelt den Umbruch bei langen Wörtern.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • normal: (Standardwert) bricht Wörter nur an erlaubten Breakpoints um
  • break-word: erlaubt Umbruch innerhalb des Wortes
  • initial
  • inherit
Beispiel ansehen …
    .wordwrap {
      word-wrap: break-word;
    }
    .normal {
      word-wrap: normal;
    }	
    p {
      width: 11em;
      font-size: 1.5em; 
      text-align: justify;
      border: 1px solid;
	  float:left;
	  margin: 1em;
    }
<p>
       Unser Donaudampfschiffahrtsgesellschaftskapitän 
       hat die Tel Nr: <a href=">0049-99991123342447372">0049-99991123342447372</a>.
</p>
Das Beispiel enthält ein langes Wort und eine verlinkte Telefonnummer. Im linken Beispiel werden die Wörter mit word-wrap: break-word so umgebrochen, dass sie in die feste Breite des Textabsatzes passen.
Beachten Sie: Die Eigenschaft word-wrap bricht Wörter und Zahlen genau dann um, wenn die (festgelegte) Breite des Absatzes erreicht ist. Es nimmt dabei keine Rücksicht auf Semantik oder Silbentrennung.
Empfehlung:
  • Verwenden Sie für Silbentrennung in Texten CSS-hyphens.
  • Verzichten Sie auf feste Breiten zugunsten eines flexiblen und responsiven Designs.

Hinweis

Ursprünglich war word-wrap eine proprietäre MS-Eigenschaft, die unter dem Namen: overflow-wrap in den CSS3-Entwurf übernommen wurde. Die Browser unterstützen aber weiterhin nur das ältere Synonym word-wrap.

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]