So legen Sie mehrere Zeilen fest, um Auslassungspunkte in CSS anzuzeigen-CSS-Tutorial-php.cn

So legen Sie mehrere Zeilen fest, um Auslassungspunkte in CSS anzuzeigen

青灯夜游

Freigeben： 2021-10-12 17:27:20

Original

24188 Leute haben es durchsucht

Einstellungsmethode: 1. Verwenden Sie „overflow:hidden;“, um den überschüssigen Teil auszublenden. 2. Verwenden Sie „-webkit-line-clamp:number oflines;“, um die Anzahl der angezeigten Textzeilen zu begrenzen. text-overflow :ellipsis;“ zeigt Auslassungspunkte an, um versteckte Überschüsse darzustellen.

So legen Sie mehrere Zeilen fest, um Auslassungspunkte in CSS anzuzeigen

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

css setzt mehrere Zeilen über die Ellipsen hinaus

Implementierungsideen:

1. Verwenden Sie die Anweisung „overflow:hidden;“, um Inhalte nicht anzuzeigen, die die Objektgröße überschreiten.

2. Verwenden Sie die Anweisung „-webkit-line-clamp: number oflines;“, um die Anzahl der angezeigten Textzeilen zu begrenzen.

3 mit den Auslassungspunkten „…“

Implementierungscode:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			*{margin: 0px;padding: 0px;}
			.box{
				width: 280px;
				height: 62px;
				margin: 50px auto;
				border: 1px solid red;
				overflow: hidden;
				-webkit-line-clamp: 3;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		</style>	
	</head>
	<body>
		<div class="box">
			css多行文本超出长度显示省略号，css多行文本超出长度显示省略号，
			css多行文本超出长度显示省略号，css多行文本超出长度显示省略号
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

So legen Sie mehrere Zeilen fest, um Auslassungspunkte in CSS anzuzeigen

Beschreibung: Die meisten mobilen Browser basieren auf dem WebKit-Kern, daher ist diese Methode für Mobilgeräte geeignet;

-webkit-line-clamp Wird verwendet, um die Anzahl der in einem Blockelement angezeigten Textzeilen zu begrenzen. Sie erscheint nicht in der CSS-Entwurfsspezifikation >display: -webkit-box Zeigt das Objekt als flexibles Boxmodell an; -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；
display: -webkit-box 将对象作为弹性伸缩盒子模型显示；
-webkit-box-orient

-webkit-box-orient Legt die Anordnung der untergeordneten Elemente der flexiblen Box fest oder ruft sie ab Objekt;

(Lernvideo Teilen: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie mehrere Zeilen fest, um Auslassungspunkte in CSS anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!