Einführung in die CSS3-Non-Line-Wrapping-Technologie und Anwendungsbeispiele

CSS3-Nichtumbruch bezieht sich auf das Festlegen eines Stils im Textinhalt, sodass dieser nicht automatisch umgebrochen wird, wenn er auf das Ende der Zeile stößt, sondern sich bis zur nächsten Zeile fortsetzt. Diese Technik wird häufig verwendet, um einzelne Textzeilen oder Codebereiche usw. zu gestalten, damit die Seite übersichtlicher und klarer aussieht.

In CSS3 gibt es zwei häufig verwendete Methoden, um einen Zeilenumbruch zu erreichen: Leerzeichen und Zeilenumbruch. Als nächstes werden wir jeden einzelnen vorstellen und Anwendungsbeispiele geben.

1. Leerraum

Das Leerraumattribut definiert, wie mit dem leeren Teil des Elements umgegangen wird.

Dieses Attribut hat die folgenden optionalen Werte:

1. normal: Standard. Ignorieren Sie zusätzliche Leerzeichen.
2. nowrap: Text wird nicht umgebrochen.
3. pre: Behalten Sie alle Leerzeichen und Zeilenumbrüche bei.
4. pre-wrap: Behalten Sie alle Leerzeichen und Zeilenumbrüche bei, aber brechen Sie sie um.
5. Vorzeile: Ignorieren Sie zusätzliche Leerzeichen, behalten Sie aber Zeilenumbrüche bei.

Anwendungsbeispiel:

<style>
    .nowrap {
        white-space: nowrap; /*文本不换行*/
    }
    .pre {
        white-space: pre; /*保留所有空格与换行符*/
    }
</style>
<div class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格 
和 换 行 符