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.
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>
Nota:
Paparkan objek sebagai model kotak fleksibel; -webkit-line-clamp
)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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
