Bagaimana untuk menetapkan berbilang baris untuk memaparkan elipsis dalam css-tutorial css-php.cn

Bagaimana untuk menetapkan berbilang baris untuk memaparkan elipsis dalam css

青灯夜游

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

asal

24160 orang telah melayarinya

Kaedah tetapan: 1. Gunakan "overflow:hidden;" untuk menyembunyikan bahagian yang berlebihan 2. Gunakan "-webkit-line-clamp:number of lines;" 3. Gunakan "text-overflow:ellipsis;" memaparkan elips untuk mewakili lebihan tersembunyi.

Bagaimana untuk menetapkan berbilang baris untuk memaparkan elipsis dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

css tetapan berbilang baris di luar elipsis

Idea pelaksanaan:

1. pernyataan tidak Memaparkan kandungan yang melebihi saiz objek bermakna menyembunyikan bahagian yang berlebihan; >

3 , gunakan pernyataan "text-overflow:ellipsis;" untuk menyembunyikan teks luar julat dengan elipsis "..."

Kod pelaksanaan:

Rendering:

<!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>

Salin selepas log masuk

Bagaimana untuk menetapkan berbilang baris untuk memaparkan elipsis dalam css Nota:

Kebanyakan penyemak imbas mudah alih adalah berdasarkan teras WebKit, jadi kaedah ini sesuai untuk mudah alih

Paparkan objek sebagai model kotak fleksibel; -webkit-line-clamp
tutorial video css
)display: -webkit-box

Atas ialah kandungan terperinci Bagaimana untuk menetapkan berbilang baris untuk memaparkan elipsis dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!