Bagaimana untuk Mencipta Limpahan Teks Berbilang Baris dengan Elipsis dalam Div Lebar Tetap?

Limpahan Teks Berbilang Baris Penyemak Imbas dengan Elipsis yang Dilampirkan dalam Lebar dan Ketinggian Tetap

Masalah:

Bagaimana bolehkah kita mencipta elipsis pada <div> dengan lebar tetap dan berbilang baris, memastikan teks yang melimpah dipotong?

Penyelesaian:

Untuk mencapai ini, kami boleh menggunakan coretan jQuery untuk mengalih keluar berulang kali perkataan terakhir teks sehingga ia sesuai dengan yang dikehendaki ketinggian.

Pelaksanaan:

1. Tentukan penanda HTML untuk <div> dengan lebar dan ketinggian tetap serta perenggan (

   ) untuk mengandungi teks.

2. Tambah CSS untuk menetapkan limpahan kepada tersembunyi, memastikan pemangkasan kekal tidak kelihatan.

3. Buat fungsi jQuery untuk melaksanakan pemangkasan. Fungsi ini akan:

   • Mendapatkan semula

     elemen dan simpannya dalam pembolehubah $p.

   • Kira ketinggian <div> dan simpannya dalam pembolehubah divh.
   • Gunakan gelung sementara untuk mengalih keluar perkataan terakhir teks sehingga ia muat dalam ketinggian yang diingini. Gelung menggunakan fungsi text() untuk mengemas kini kandungan

     dengan teks yang dikemas kini dan dipotong.

Pertimbangan Tambahan:

1. Pendekatan ini melibatkan JavaScript untuk pemangkasan. Pertimbangkan untuk menggabungkannya dengan pemangkasan sebelah pelayan untuk meningkatkan prestasi.
2. Tambahkan lebar: 100% pada

   CSS untuk memastikan ia menggunakan lebar penuh <div>.

Contoh:

HTML

<div>

CSS

#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}

#fos p {
  width: 100%;
  padding: 10px;
  margin: 0;
}

jQuery

var $p = $('#fos p');
var divh = $('#fos').height();

while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

Demo: https://jsfiddle.net/w0n5cy2j/

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Limpahan Teks Berbilang Baris dengan Elipsis dalam Div Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!