So verhindern Sie, dass Elemente in CSS umbrochen werden

Beim Webdesign müssen wir manchmal verhindern, dass einige Elemente umbrochen werden, aber um sie alle in einer Zeile anzuzeigen, müssen wir CSS verwenden. Als Nächstes erfahren Sie in diesem Artikel, wie Sie mithilfe von CSS verhindern, dass Elemente umbrochen werden.

1. Leerraumattribut

Das Leerraumattribut ist eine der CSS-Eigenschaften, die Leerzeichen und Zeilenumbrüche in Elementen steuert. Durch Festlegen des Leerraumattributs können wir verhindern, dass Elemente umbrochen werden, oder den Umbruch beibehalten.

1. Legen Sie fest, dass das Element nicht umbrochen wird.

Wenn Sie möchten, dass der Text im Element in derselben Zeile angezeigt wird, können Sie das Leerraumattribut wie unten gezeigt auf „nowrap“ setzen:

div{
    white-space: nowrap;
}

Der obige Code bedeutet dass der Text im div-Element kein Zeilenumbruch ist.

2. Zeilenumbrüche beibehalten

Wenn Sie Zeilenumbrüche im Element beibehalten möchten, können Sie das Leerraumattribut auf „Vorher“ oder „Vorumbruch“ setzen, wie unten gezeigt:

div{
    white-space: pre;
}

div{
    white-space: pre-wrap;
}

Zusätzlich Zum White-Space-Attribut können wir auch das Display-Attribut verwenden, um den Effekt zu erzielen, dass Elemente nicht umbrochen werden. Für das Anzeigeattribut stehen zwei Werte zur Verfügung: inline und inline-block.

1.inline

Setzen Sie das Anzeigeattribut des Elements auf „Inline“, um das Element und den Text in derselben Zeile anzuzeigen, wie unten gezeigt:

span{
    display: inline;
}

Der obige Code bedeutet, dass das Span-Element und der Text in derselben Zeile angezeigt werden .

2.inline-block

Setzen Sie das Anzeigeattribut des Elements auf „inline-block“, wodurch das Element und der Text in derselben Zeile angezeigt werden können. Sie können jedoch die Breite und Höhe des Elements festlegen, wie unten gezeigt :

div{
    display: inline-block;
    width: 100px;
    height: 50px;
}

Der obige Code stellt dar div Sowohl das Element als auch der Text werden in derselben Zeile angezeigt und die Breite und Höhe des Elements werden festgelegt.

3. Überlaufattribut

Manchmal führt langer Text dazu, dass Elemente automatisch umbrochen werden. Wenn Sie verhindern möchten, dass Elemente umbrochen werden, können Sie das Überlaufattribut verwenden. Das Überlaufattribut hat zwei Werte: sichtbar und ausgeblendet.

1.visible

Setzen Sie das Überlaufattribut des Elements auf sichtbar, was bedeutet, dass der Elementinhalt das Elementfeld überlaufen darf, wie unten gezeigt:

div{
    overflow: visible;
}

2.hidden

Setzen Sie das Überlaufattribut des Elements auf versteckt, was bedeutet Mittel, um zu verhindern, dass der Elementinhalt überläuft Das Elementfeld, wie unten gezeigt:

div{
    overflow: hidden;
}

Die oben genannten drei Möglichkeiten, CSS zu verwenden, um das Umbrechen von Elementen zu verhindern: Leerraumattribut, Anzeigeattribut und Überlaufattribut. Durch die Auswahl unterschiedlicher Methoden unter unterschiedlichen Umständen können bessere Anzeigeeffekte auf Webseiten erzielt werden.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass Elemente in CSS umbrochen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!