Heim  >  Artikel  >  Web-Frontend  >  So legen Sie mehrere Zeilen fest, um Auslassungspunkte in CSS anzuzeigen

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

青灯夜游
青灯夜游Original
2021-10-12 17:27:2024178Durchsuche

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>

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!

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