CSS-Text überschreitet den Zeilenumbruch

CSS-Text überschreitet den Zeilenumbruch

Beim Webdesign stoßen wir häufig auf Situationen, in denen der Textinhalt den übergeordneten Container überschreitet. Zu diesem Zeitpunkt müssen wir CSS verwenden, um dieses Problem zu lösen. CSS bietet einige Eigenschaften zum Steuern des Zeilenumbruchs und der Kürzung von Text. In diesem Artikel wird die Verwendung dieser Eigenschaften und praktische Fälle vorgestellt.

1. Textumbruch

Wenn der Textinhalt den übergeordneten Container überschreitet, können wir die Textumbruchmethode steuern, um ihn automatisch innerhalb des übergeordneten Containers umzubrechen. Die folgenden CSS-Eigenschaften werden häufig verwendet:

1. word-wrap

Diese Eigenschaft wird verwendet, um anzugeben, ob Zeilenumbrüche innerhalb von Wörtern zulässig sind. Die Standardeinstellung ist normal. Wenn der Wert dieses Attributs break-word ist und die Länge eines Wortes die Breite des Containers überschreitet, wird das Wort automatisch unterbrochen und umbrochen.

2. word-break

Dieses Attribut wird verwendet, um anzugeben, wie Wörter gebrochen werden. Die Standardeinstellung ist normal. Wenn der Wert dieses Attributs „break-all“ ist, wird auch ein Wort umgebrochen, selbst wenn es die Breite des Containers nicht überschreitet.

Das Folgende ist ein Beispiel:

<code class="css">.container {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.text {
    word-wrap: break-word;
    word-break: break-all;
}</code>

<code class="html"><div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会超出容器的宽度，需要我们使用CSS来控制其换行。</p>
</div></code>

2. Textkürzung

Wenn wir die Länge des Textes begrenzen müssen, anstatt ihn in neue Zeilen umbrechen zu lassen, können wir die Textkürzung verwenden. Im Folgenden sind einige häufig verwendete CSS-Eigenschaften aufgeführt:

1. overflow

Diese Eigenschaft wird verwendet, um anzugeben, wie sich der Inhalt im übergeordneten Container verhält, wenn er die Containergröße überschreitet. Die Standardeinstellung ist sichtbar. Wir können es auf „verborgen“ setzen, was bedeutet, dass der Teil hinter dem Inhalt ausgeblendet wird; oder es auf „scrollen“ setzen, was bedeutet, dass die Bildlaufleiste angezeigt wird.

2. text-overflow

Dieses Attribut wird verwendet, um anzugeben, wie Text angezeigt wird, wenn er überläuft. Die Standardeinstellung ist „clip“. Wir können es auf Auslassungspunkte setzen, was bedeutet, dass Auslassungspunkte automatisch hinzugefügt werden, wenn der Text überläuft.

3. white-space

Dieses Attribut wird verwendet, um zu steuern, wie der Leerraum innerhalb des Elements verarbeitet wird. Der Standardwert ist normal. Wir können es auf „nowrap“ setzen, was bedeutet, dass der Text nicht umgebrochen werden soll, es sei denn, das „br“-Tag wird angetroffen.

Das Folgende ist ein Beispiel:

<code class="css">.container {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text {
    width: 100%;
}</code>

Das Obige ist die Lösung für CSS-Text, der über Zeilenumbrüche hinausgeht. Ich hoffe, dass es für alle hilfreich sein kann. Im eigentlichen Entwicklungsprozess können wir entsprechend den tatsächlichen Anforderungen geeignete Attribute auswählen, um die besten Ergebnisse zu erzielen.

Das obige ist der detaillierte Inhalt vonCSS-Text überschreitet den Zeilenumbruch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!