Heim > Artikel > Web-Frontend > Wie kann man den Überlaufteil der Textanzeige in CSS mit Auslassungspunkten versehen? (Codebeispiel)
Wie kann man den Überlaufteil der Textanzeige in CSS mit Auslassungspunkten versehen? (Codebeispiel)
- 青灯夜游Original
- 2018-09-07 15:30:5746582Durchsuche
Wenn wir ein Web-Frontend entwickeln, erhalten wir normalerweise den Titel des Artikels und zeigen ihn Zeile für Zeile an. Wenn der Titel jedoch zu lang ist, kommt es zu Zeilenumbrüchen. Außerdem wäre es bei der Anzeige eines Teils der Textinformationen zu umständlich, sie vollständig anzuzeigen, was zu einem schlechten Web-Erlebnis führen würde. Obwohl wir overflow:hidden verwenden können, um Zeichen auszublenden, die die Breite überschreiten. Aber das Ende wirkt immer etwas steif. Es ist auch nicht förderlich, den Benutzer später darauf aufmerksam zu machen, dass noch nicht angezeigte Zeichen vorhanden sind. Am besten ersetzen Sie die zusätzlichen Zeichen durch Ellipsen.
In diesem Kapitel stellen wir Ihnen im Detail vor, wie Sie CSS verwenden, um den Überlaufteil von Text-Ellipsen anzuzeigen. Ich hoffe, es hilft allen.
1: Eine einzelne Textzeile läuft über und zeigt Auslassungspunkte an... (meistens zeigt der überschüssige Teil des Titels Auslassungspunkte an...)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？单行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{width: 300px;height: 500px;margin: 50px auto;}
.overflow{
width:220px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">
<p>
css 实现单行文本超出长度显示省略号
</p>
<p class="overflow">
css 实现单行文本超出长度显示省略号
</p>
</div>
</body>
</html>Darstellung des obigen Codes wie folgt:
Unter anderem bedeutet „white-space: nowrap;“, dass der Text nicht umgebrochen und in derselben Zeile fortgesetzt wird bis eine Beschriftung gefunden wird;
overflow: hide; Inhalt, der die Objektgröße überschreitet, nicht anzeigen
text-overflow: ellipsis; Überläufe, es wird angezeigt ... Sie können das Attribut natürlich auch auf Clip setzen. Punkte werden nicht angezeigt
-o-text-overflow: Um mit dem Opera-Browser kompatibel zu sein; >
2: Mehrzeiliger Textüberlauf zeigt Auslassungspunkte an...
1. Direkt mit CSS-Attributen festgelegt (nur -webkit-Kernel hat Wirkung)<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
css 实现多行文本超出长度显示省略号，css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号
</div>
</body>
</html> Die Darstellung des obigen Codes lautet wie folgt:
-webkit-line-clamp wird verwendet, um die Anzahl der in einem Blockelement angezeigten Textzeilen zu begrenzen. Dies ist eine andere nicht unterstützte WebKit-Eigenschaft, die in der CSS-Entwurfsspezifikation nicht erscheint. -webkit-box zeigt das Objekt als flexibles Box-Modell an;
-webkit-box-orient legt die Anordnung der Unterelemente des Flex-Box-Objekts fest oder ruft sie ab; : Auslassungspunkte werden für mehrzeiligen Text verwendet, wobei die Auslassungspunkte „…“ verwendet werden, um den Text auszublenden, der den Bereich überschreitet.
2. Verwenden Sie die Pseudoklasse
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
</style>
</head>
<body>
<div class="box">
<p>
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号
</p>
</div>
</body>
</html>Die Darstellung des obigen Codes ist wie folgt:
Diese Methode hat einen großen Bereich von Anwendungen, aber der Text überschreitet nicht Ellipsen werden auch bei Zeilen angezeigt, und diese Methode kann mit js optimiert werden. Stellen Sie die Höhe auf ein ganzzahliges Vielfaches der Zeilenhöhe ein, um zu verhindern, dass überschüssiger Text angezeigt wird. Durch das Hinzufügen eines Hintergrunds mit Farbverlauf zu p::after wird verhindert, dass nur die Hälfte des Textes angezeigt wird. Da ie6-7 keinen Inhalt anzeigt, müssen Sie Tags hinzufügen, um mit ie6-7 kompatibel zu sein (z. B. ...), um mit ie8 kompatibel zu sein ::after mit :after.
3. Verwenden Sie absolute Positionierung und Auffüllung (browserübergreifende Lösung). Das Prinzip der Methode besteht darin, zuerst ein ... in das Element mit Text einzubetten und dann eine Auslassungsstelle (padding-right) auf der rechten Seite des Elements mit Text zu belassen , Verwenden Sie abschließend die absolute Positionierung, um die Auslassungspunkte ... im rechten Polsterbereich rechts (untere rechte Ecke) zu positionieren.
Das obige ist der detaillierte Inhalt vonWie kann man den Überlaufteil der Textanzeige in CSS mit Auslassungspunkten versehen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!