Line Breaks

coding line breaks

Table of content

In HTML gibt es einige Entitäten und CSS-Eigenschaften, die beeinflussen können, wie der Text in einem Element als Line Breaks umbricht oder umgebrochen wird:

  • ­­ (Weicher Bindestrich): Wie du vielleicht schon weißt, ist dies ein weicher Trennstrich, der dem Browser einen Hinweis darauf gibt, wo er ein Wort gegebenenfalls mit Line Breaks umbrechen muss. Er ist unsichtbar, es sei denn, das Wort wird am Ende einer Zeile umbrochen.
     
  • ​ (Zero Width Space): Dies ist ein unsichtbares Leerzeichen, das es dem Text ermöglicht, an dieser Stelle umzubrechen, ohne dass ein Zeichen angezeigt wird. Es ist nützlich, um lange Textabschnitte wie URLs oder Bezeichner, die keine natürlichen Umbruchpunkte haben, zu trennen.
    <p>http://www.example.com/very&#8203;long&#8203;URL&#8203;path</p>
  • CSS-Eigenschaft word-break: Mit dieser CSS-Eigenschaft kannst du festlegen, wie Wörter als Line Breaks umbrochen werden sollen, wenn sie das Ende einer Zeile erreichen.
    .container {
      word-break: break-all; /* To break at any character */
    }
  • CSS-Eigenschaft overflow-wrap: Diese Eigenschaft legt fest, ob der Browser Zeilenumbrüche in eine ansonsten nicht umbrechbare Zeichenkette einfügen soll, um zu verhindern, dass der Text seinen Container überläuft.
    .container {
      overflow-wrap: break-word; /* To break at appropriate places */
    }
  • CSS-Eigenschaft white-space: Diese Eigenschaft legt fest, wie der Leerraum innerhalb eines Elements behandelt wird.
    .container {
      white-space: pre-wrap; /* Preserves white space and wraps text */
    }
  • <wbr>(Word Break Opportunity): Dieser HTML-Tag schlägt eine Stelle im Text vor, an der der Browser optional einen Zeilenumbruch vornehmen kann. Es ist ähnlich wie ­, fügt aber keinen Bindestrich ein.
    <p>http://www.example.com/very<wbr>long<wbr>URL<wbr>path</p>

Jede dieser Methoden hat ihren eigenen Anwendungsfall, je nachdem, ob du potenzielle Zeilenumbruchspunkte vorschlagen, Line Breaks erzwingen oder den Umbruch von Text innerhalb seines Containers steuern willst.

Related posts

Sie sitzen um einen großen Tisch herum, jeder Freund mit einem Notizblock und einem Stift, und diskutieren und bewerten verschiedene Lösungen und Optionen für ihren ersten Einsatz in WordPress Sicherheit.

WordPress Sicherheit

Reading Time: 14:35 min

Vielleicht hast du auch das Gefühl, dass du hinter der Sicherheit deiner WordPress Installation gar nicht mehr so richtig hinterher kommst? Machst du auch jeden Tah Updates und denkst dir…

View post
Warum du verlassene Plugins vermeiden solltest - Frau spricht am Telefon

Warum du verlassene Plugins vermeiden solltest

Reading Time: 7:5 min

In letzter Zeit ist das Problem der nicht mehr genutzten WordPress-Plugins und -themes immer wieder aufgetaucht. Da etwa 30 % der gemeldeten Sicherheitslücken in Plugins nicht gepatcht werden, haben sich…

View post
Desktop View, Frau am Arbeiten - Cyberpanel Absicherung

CyberPanel absichern

Reading Time: 1:11 min

Kleiner Reminder – wenn du CyberPanel nutzt und deine Installation absichern willst, ein Hinweis, der nicht offensichtich ist. Ich bin erst darüber gestolpert, als ich mich vertippt habe – und…

View post

Hinterlasse den ersten Kommentar