Bagaimana untuk mencapai dua baris di luar elips dalam css

Dalam CSS, kadangkala anda perlu membuat elemen memaparkan dua atau lebih baris teks, tetapi anda tidak mahu semua teks dipaparkan Dalam kes ini, anda boleh menggunakan kaedah "dua baris di luar elipsis". .

Dalam CSS, anda boleh menggunakan dua atribut text-overflow dan white-space untuk mencapai kesan ini. limpahan teks digunakan untuk menetapkan gaya apabila teks melebihi bekas, dan ruang putih digunakan untuk mengawal cara teks dipaparkan tanpa pembalut.

Pertama, letakkan teks yang perlu ditetapkan kepada dua baris dalam bekas lebar tetap, seperti yang ditunjukkan dalam contoh berikut:

<div class="container">这是需要超过两行的文本内容</div>

Kemudian, tambah gaya berikut dalam CSS :

.container {
  width: 200px;       /* 容器宽度 */
  height: 48px;       /* 容器高度，即两行高度 */
  overflow: hidden;   /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出内容用省略号代替 */
  white-space: nowrap; /* 不换行 */
}

Dengan cara ini, kandungan teks yang melebihi dua baris boleh ditinggalkan dalam bentuk "..." sambil mengekalkan ketinggian dua baris asal tidak berubah.

Perlu diperhatikan bahawa limpahan teks dan ruang putih hanya berfungsi pada teks yang dipintas, jadi jika anda ingin menetapkan gaya teks dalam bekas, anda perlu menggunakan atribut lain yang berkaitan pada masa yang sama masa, seperti saiz fon dan ketinggian garisan, dsb.

Selain dua baris di luar elips, CSS juga menyediakan satu siri teks yang serupa di luar kaedah pemangkasan, seperti elipsis satu baris, elipsis berbilang baris, dll. Pembangun boleh memilih dan menggunakan mengikut keperluan sebenar .

Secara amnya, kaedah di luar elips CSS boleh membantu kami menjadikan kandungan teks lebih cantik dan lebih mudah dibaca tanpa mengambil terlalu banyak ruang.

Atas ialah kandungan terperinci Bagaimana untuk mencapai dua baris di luar elips dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!