Heim  >  Artikel  >  Web-Frontend  >  Tiefgehendes Verständnis von CSS-Stilen, das über das Ausblenden einer Zusammenfassung hinausgeht

Tiefgehendes Verständnis von CSS-Stilen, das über das Ausblenden einer Zusammenfassung hinausgeht

高洛峰
高洛峰Original
2017-03-15 11:12:141352Durchsuche

Verstecken Sie den Text über den Teil hinaus und fassen Sie zwei Methoden zusammen.

1. Einzeiliges Ausblenden

HTML-Code

50e14a8282c7c1a3c636d5a8554946eb当文字超过范围的时候,超出部分会隐藏起来。94b3e26ee717c64999d7867364b1b4a3

CSS-Code

.mi {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
}

Ergebnis

Wenn der Text den Bereich überschreitet, wird der überschüssige Teil ausgeblendet.

2. Mehrzeiliges Ausblenden

HTML-Code

50e14a8282c7c1a3c636d5a8554946eb当文字超过范围的时候,超出部分会隐藏起来。可以设置第几行开始隐藏。94b3e26ee717c64999d7867364b1b4a3

CSS-Code

.mi {
	width: 200px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

Ergebnis

Wenn der Text den Bereich überschreitet, wird der überschüssige Teil ausgeblendet. Sie können festlegen, welche Zeile ausgeblendet werden soll.

Das obige ist der detaillierte Inhalt vonTiefgehendes Verständnis von CSS-Stilen, das über das Ausblenden einer Zusammenfassung hinausgeht. 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