Bagaimana untuk memaparkan lebihan bahagian berbilang baris sebagai elips dalam css

Apabila berbilang baris teks muncul dalam CSS, selalunya terdapat masalah bahawa bahagian yang berlebihan tidak dapat dipaparkan dengan betul. Pada masa ini kita boleh menggunakan elips untuk menyelesaikan masalah ini.

Kaedah operasi khusus adalah seperti berikut:

1. Mula-mula, anda perlu menetapkan bekas dengan lebar terhad untuk teks, contohnya:

<div class="text-container">
  这是一段需要进行多行省略号处理的文本内容
</div>

2. Kemudian , tetapkan gaya bekas teks dalam CSS, termasuk lebar, saiz fon, ketinggian baris dan atribut lain:

.text-container {
  width: 300px;
  font-size: 16px;
  line-height: 1.5;
}

3. Seterusnya, kita boleh melaksanakan elipsis melalui atribut limpahan teks dalam Kesan CSS. Atribut ini mempunyai tiga nilai: klip, elipsis dan rentetan. Antaranya, klip bermaksud tidak memaparkan sebarang elips, dan rentetan bermaksud memaparkan rentetan yang ditentukan sebagai elipsis. Apabila berbilang baris teks ditinggalkan, elipsis biasanya digunakan untuk mendapatkan nilai. Pada masa yang sama, kami juga perlu menetapkan ruang putih kepada normal atau normal-wrap untuk membolehkan teks membalut secara automatik selepas melebihi lebar bekas.

.text-container {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 控制行数 */
  -webkit-box-orient: vertical;
}

4. Dalam kod di atas, kami juga menggunakan sifat -webkit-line-clamp dan -webkit-box-orient untuk mengawal nombor dan arah baris teks. Antaranya, atribut -webkit-line-clamp digunakan untuk mengawal bilangan baris teks yang dipaparkan Dalam contoh ini, saya menetapkannya untuk memaparkan sehingga 3 baris. Atribut -webkit-box-orient digunakan untuk mentakrifkan susunan elemen anak kotak fleksibel Di sini saya menetapkannya kepada susunan menegak.

Ini melengkapkan kesan elipsis berbilang baris CSS. Secara umum, perkara penting yang perlu diberi perhatian ialah menetapkan lebar bekas teks dan menetapkan bilangan baris dan gaya elips yang sesuai. Pada masa yang sama, gunakan atribut limpahan teks untuk mengawal gaya elipsis bahagian lebihan teks untuk mencapai hasil yang lebih baik.

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