Pemotongan pelbagai baris dengan CSS tulen

Ini adalah petua untuk melaksanakan pemangkasan teks pelbagai baris menggunakan CSS tulen. Artikel ini memperkenalkan cara pintar untuk melaksanakan pemotongan teks menggunakan line-height dan pseudo-elemen dan paparan ellipsis (...).

Artikel ini menunjukkan bahawa walaupun kini terdapat cara-cara yang diseragamkan untuk menangani pemotongan teks tunggal, pemotongan teks berbilang baris masih rumit. Kaedah CSS tulen (tiada JavaScript atau operasi sisi pelayan) yang diperkenalkan dalam artikel ini sangat dihormati untuk kesederhanaannya. Firefox 68 dan ke atas telah mula menyokong -webkit-line-clamp , yang meningkatkan keserasian penyemak imbas kaedah ini.

Walau bagaimanapun, artikel ini memberi tumpuan kepada teknik CSS yang lebih bijak yang menggunakan line-height untuk pengiraan ketinggian teks. Dengan mengandaikan line-height elemen adalah 1.4rem, untuk memaparkan sehingga tiga baris teks, hanya tetapkan max-height kepada 1.4rem * 3 . Untuk kemudahan penggunaan, artikel itu mengesyorkan menentukan pembolehubah CSS --lh untuk menetapkan line-height global:

 html {
  --lh: 1.4rem;
  ketinggian garis: var (-lh);
}

Kemudian, gunakan max-height dan overflow: hidden untuk melaksanakan pemotongan teks:

 .Truncate-overflow {
  --max-line: 3;
  Max-tinggi: calc (var (-lh) * var (-max-lines));
  Limpahan: Tersembunyi;
}

Untuk memaparkan elips selepas teks memotong, artikel itu menggunakan pseudo-elemen ::before menambah elips ke sudut kanan bahagian bawah teks:

 .TRUNCATE-OVERFLOW :: Sebelum {
  Kandungan: "...";
  Kedudukan: Mutlak;
  Bawah: 0;
  Kanan: 0;
}

Artikel itu juga menegaskan bahawa untuk mengelakkan memaparkan elips apabila bilangan baris teks kurang daripada --max-lines , satu lagi elemen pseudo ::after boleh digunakan untuk mengatasi elips:

 .TRUNCATE-OVERFLOW :: Selepas {
  Kandungan: "";
  Kedudukan: Mutlak;
  Kanan: 0;
  lebar: 1rem;
  Ketinggian: 1rem;
  Latar Belakang: Putih;
}

Artikel ini akhirnya menyebutkan penggunaan sifat logik CSS (seperti inset-inline-end bukannya right ) untuk meningkatkan keserasian dalam bahasa dan senario aliran teks yang berbeza, dan menunjukkan batasan kaedah ini: ellipsis tidak dekat dengan perkataan terakhir. Di samping itu, artikel itu juga menyebutkan masalah akses yang berpotensi untuk kaedah ini: jika teks yang dipenggal mengandungi unsur -unsur interaktif, unsur -unsur ini difokuskan tetapi tidak dapat dilihat.

Atas ialah kandungan terperinci Pemotongan pelbagai baris dengan CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!