Verhindern von Zeilenumbrüchen mit CSS

Einführung

Entwickler bevorzugen für gewöhnlich, Text auf einer Webseite umzubrechen. Der Zeilenumbruch schränkt einen Text auf die eine oder andere Weise ein und verhindert Designprobleme. Der Textumbruch kann auch den horizontalen Bildlauf verhindern.  Aber es gibt Fälle, in denen man möchte, dass Textblöcke unabhängig von ihrer Länge in der gleichen Zeile bleiben.  Sie können Zeilenumbrüche und Textumbrüche für bestimmte Elemente mit der CSS-Eigenschaft white-space verhindern.

In diesem Tutorial stylen Sie denselben Textblock auf vier verschiedene Arten, zuerst mit Zeilenumbruch und dann dreimal ohne Zeilenumbruch:

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Dadurch stehen Ihnen mehrere Optionen für den Umbruch oder den Nichtumbruch Ihres Textes zur Verfügung.

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie:

• Einen Code-Editor Ihrer Wahl wie nano oder Visual Studio Code
• Einen Webbrowser
• Einen Ratgeber mit HTML-Grundlagen. Sie können unsere Tutorial-Reihe So erstellen Sie eine Website mit HTML als Einleitung ansehen.

Schritt 1 — Verhindern und Erzwingen von Zeilenumbrüchen in CSS

In diesem Schritt werden Sie ein Stylesheet mit drei verschiedenen Klassen erstellen.  Jeder geht unterschiedlich mit Zeilenumbrüchen um: der erste bricht den Text in der Standardmethode um, während der zweite und dritte den Text zwingen, keinen Zeilenumbruch zu erzeugen und umzubrechen.

Erstellen und öffnen Sie zuerst eine Datei namens main.css mit nano oder Ihrem bevorzugten Editor:

nano main.css

Fügen Sie den folgenden Inhalt hinzu, der drei CSS-Klassen einführt, die mehrere Eigenschaften verwenden, einschließlich white-space:

.sammy-wrap {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
}
.sammy-nowrap-1 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
}
.sammy-nowrap-2 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Ihre erste Klasse ist .sammy-wrap. Sie definiert sechs häufige CSS-Eigenschaften, einschließlich border-radius, background-color, border max-width, padding und margin-bottom. Diese Klasse erzeugt einen visuellen Rahmen, definiert aber keine speziellen Umbruch-Eigenschaften.  Dies bedeutet, dass sie Zeilen in der Standardmethode bricht.

Ihre zweite Klasse ist .sammy-nowrap-1. Sie definiert die gleiche Box wie .sammy-wrap, aber jetzt fügen Sie eine weitere Eigenschaft hinzu: white-space. Die Eigenschaft white-space hat zahlreiche Optionen, die alle definieren, wie man white-space in einem bestimmten Element behandelt. Hier haben Sie white-space auf nowrap eingestellt, was alle Zeilenumbrüche verhindert.

Ihre dritte Klasse ist .sammy-nowrap-2. Sie fügt white-space und zwei zusätzliche Eigenschaften hinzu: overflow und text-overflow. Die Eigenschaft overflow behandelt scrollable overflow, die auftritt, wenn der Inhalt innerhalb eines Elements über die Ränder dieses Elements hinausgeht. Die Eigenschaft overflow kann diesen Inhalt scrollbar, sichtbar oder versteckt machen. Sie setzen overflow auf hidden und verwenden dann die Eigenschaft text-overflow, um noch mehr Anpassung hinzuzufügen. text-overflow kann Ihnen helfen, einem Benutzer zu signalisieren, dass zusätzlicher Text versteckt bleibt. Sie haben dies auf ellipsis gesetzt, also wird Ihre Zeile nun weder gebrochen noch über die Box hinaus erweitert. CSS verbirgt den Overflow und signalisiert den verborgenen Inhalt mit einem ...

Speichern und schließen Sie Ihre Datei.

Nachdem Sie nun einen Stylesheet haben, sind Sie bereit, eine kurze HTML-Datei mit einem Beispieltext zu erstellen. Dann laden Sie die Webseite in einem Browser und untersuchen, wie CSS Zeilenumbrüche verhindern kann.

Schritt 2 — Erstellen der HTML-Datei

Wenn Ihre CSS-Klassen definiert sind, können Sie diese auf einen Beispieltext anwenden.

Erstellen und öffnen Sie eine Datei namens index.html in Ihrem bevorzugten Editor. Stellen Sie diese in den gleichen Ordner wie main.css

nano index.html

Fügen Sie den folgenden Inhalt hinzu, der folgendes main.css als Ihr Stylesheet assoziiert, und wenden Sie dann Ihre Klassen auf einen Beispiel-Textblock an:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSS</title>
<link href="main.css" rel="stylesheet">
</head>

<body>
<p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

Sie haben dem ersten Textblock Ihren Standardumbruchsstil zugewiesen, Ihren nowrap -Stil dem Zweiten und den nowrap-Stil, der mit Ellipsis auf dem Dritten hidden ist. Sie haben sammy-wrap dem vierten Beispiel zugewiesen, aber Sie überschreiben den Standardumbruch, indem Sie nicht-umbrechende Leerzeichen ( ) direkt in das HTML einfügen. Wenn Sie Zeilenumbrüche im Einzelfall verhindern müssen, dann können nicht-unterbrechende Leerzeichen eine schnelle Lösung bieten.

Öffnen Sie index.html in einem Webbrowser und sehen Sie Ihre Ergebnisse an. Ihre vier Textblöcke werden wie folgt erscheinen:

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indischer Mul mora cisco masu lachs, roosterfish requiem hak longnose lancetfish roter snapper Sacramento splittail riant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indischer Mul mora cisco masu lachs, roosterfish requiem hak longnose lancetfish roter snapper Sacramento splittail riant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indischer Mul mora cisco masu lachs, roosterfish requiem hak longnose lancetfish roter snapper Sacramento splittail riant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Sie haben Ihre CSS-Eigenschaften erfolgreich angepasst, um Zeilenumbrüche in vier verschiedenen Modi zu verhindern oder zuzulassen.

Zusammenfassung

In diesem Tutorial haben Sie CSS verwendet, um Zeilenumbrüche in einem Textblock zu verhindern. Sie haben den Text innerhalb eines Rahmens formatiert und dann die Eigenschaft white-space hinzugefügt, um den Standard-Textumbruch zu überschreiben. Um mehr über die Handhabung von Textumbruch und white-space zu erfahren, denken Sie daran, alle Eigenschaften von white-space CSS zu erkunden.