Heim > Artikel > Web-Frontend > So implementieren Sie mehrzeilige Ellipsen in Text in CSS

So implementieren Sie mehrzeilige Ellipsen in Text in CSS

coldplay.xixiOriginal: 2021-03-11 14:39:1728668Durchsuche

So implementieren Sie mehrzeilige Ellipsen in Text mit CSS: 1. Fügen Sie den Stil „display: -webkit-box;“ zum Textelement hinzu 3. Fügen Sie die Stileinstellung „-webkit-line-clamp: 3;“ zum Textelement hinzu, um einige Textzeilen anzuzeigen Zeigt Auslassungspunkte an, wenn die Anzahl der Zeilen die angegebene Anzahl überschreitet.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So implementieren Sie mehrzeilige Ellipsen in Text mit CSS:

Wenn Sie die Überlaufanzeige von Ellipsen in einzeiligem Text implementieren möchten, sollten alle Schüler wissen, wie das Attribut text-overflow:ellipsis属性来，当然还需要加宽度width verwendet wird, um mit teilweisem Durchsuchen kompatibel zu sein .

Realisieren Sie das Auslassen von einzeiligem Text.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin:0 auto ;
                width:300px;
                color: red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>
    </body>
</html>

Ergebnis Zugehörige Attributbeschreibung

So implementieren Sie mehrzeilige Ellipsen in Text in CSS

CSS-Textüberlaufeigenschaft Das Attribut

text-overflow gibt an, wie Text angezeigt werden soll, wenn er das Element, das ihn enthält, überläuft. Nach dem Überlauf können Sie festlegen, dass der Text ausgeschnitten wird, Auslassungspunkte (...) oder eine benutzerdefinierte Zeichenfolge angezeigt werden (nicht von allen Browsern unterstützt).

text-overflow muss mit den folgenden zwei Attributen verwendet werden:

So implementieren Sie mehrzeilige Ellipsen in Text in CSS

white-space: nowrap;overflow: versteckt;

Verwendbare Attributwerte:

value

De Skript
Clip
Text ausschneiden.

EllipsenEllipsen ...stringinheritCSS-Leerraumattribut Das Leerraumattribut gibt an, wie mit dem Leerraum innerhalb des Elements umgegangen wird.

anzeigen, um zugeschnittenen Text darzustellen.
	Verwenden Sie die angegebene Zeichenfolge, um den zugeschnittenen Text darzustellen.
initial	ist auf den Standardwert der Eigenschaft festgelegt.
Diesen Attributwert vom übergeordneten Element erben.

Wert	Beschreibung

normal

Standard. Leerzeichen werden vom Browser ignoriert.

preLeerzeichen werden vom Browser beibehalten. Es verhält sich wie das

-Tag in HTML. <tr class="firstRow">
<th></th>
<th>nowrap</th>
</tr>Der Text wird nicht umgebrochen, der Text wird in derselben Zeile fortgesetzt, bis das Tag <br> gefunden wird. <tr>
<td></td>
<td>pre-wrap</td>
</tr>Behält Leerzeichensequenzen bei, wird aber normal umbrochen. <tr>
<td></td>
<td>Vorzeilen</td>
</tr>Kombinieren Sie Leerzeichensequenzen, behalten Sie aber Zeilenumbrüche bei. <tr>
<td></td>
<td>inherit</td>
</tr> gibt an, dass der Wert des Leerraumattributs vom übergeordneten Element geerbt werden soll. <tr>
<td></td>
<td></td>
</tr>CSS-Überlaufeigenschaft<tr>
<td></td>Die Überlaufeigenschaft gibt an, was passiert, wenn Inhalt die Box eines Elements überläuft. <td></td>
</tr><tr>
<td> Wert </td>
<td> Beschreibung </td>
</tr>

sichtbar

Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.

verstecktDer Inhalt wird gekürzt und der Rest des Inhalts ist unsichtbar. Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den Rest des Inhalts anzuzeigen. Wenn Inhalte zugeschnitten werden, zeigt der Browser Bildlaufleisten an, um den Rest des Inhalts anzuzeigen. gibt an, dass der Wert des Überlaufattributs vom übergeordneten Element geerbt werden soll. Empfohlene verwandte Tutorials: CSS-Video-Tutorial

	scrollen
	automatisch
	inherit

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mehrzeilige Ellipsen in Text in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So zentrieren Sie die Anzeige von CSS-DivNächster Artikel：So zentrieren Sie die Anzeige von CSS-Div

In Verbindung stehende Artikel

Mehr sehen