Bagaimanakah kita boleh menambahkan elips (...) untuk menunjukkan pemotongan pada elemen `` berbilang baris dengan lebar dan ketinggian tetap?-tutorial js-php.cn

Bagaimanakah kita boleh menambahkan elips (...) untuk menunjukkan pemotongan pada elemen `` berbilang baris dengan lebar dan ketinggian tetap?

DDD

Lepaskan： 2024-10-27 08:23:30

asal

454 orang telah melayarinya

How can we append ellipses (...) to indicate truncation on a multi-line `` element with a fixed width and height?

Pengendalian Ellipsis untuk Limpahan Teks Lebar Tetap, Berbilang Baris

Dalam bidang pembangunan web, keperluan timbul untuk mengendalikan limpahan teks secara elegan dalam bekas dengan yang ditentukan lebar dan tinggi. Bagaimanakah kita boleh menambahkan elips (...) untuk menunjukkan pemotongan pada berbilang baris

elemen?

Penyelesaian Berkemungkinan:

jQuery menawarkan penyelesaian dengan penanda dan CSS berikut:

<code class="html"><div id="fos">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></code>

Salin selepas log masuk

<code class="css">#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}
#fos p {
  padding: 10px;
  margin: 0;
}</code>

Salin selepas log masuk

Kod jQuery berulang kali memangkas perkataan terakhir teks sehingga ketinggian yang dikehendaki dicapai:

<code class="javascript">var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}</code>

Salin selepas log masuk

Pertimbangan:

Teknik ini memastikan hasil visual yang betul, walaupun dengan JavaScript dilumpuhkan.
Pemangkasan bahagian pelayan boleh meningkatkan prestasi.
Ini adalah penyelesaian yang tidak lengkap dan memerlukan pemurnian lanjut untuk pelaksanaan praktikal.

Demonstrasi :

Demonstrasi langsung tersedia di jsFiddle: https://jsfiddle.net/5638d9y0/

Sumber Tambahan:

[Tutorial Kotak Fleksibel CSS](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[Memperkenalkan Flexbox](https://developer.mozilla .org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
[Panduan Lengkap untuk Flexbox](https://www.w3schools.com/css/css3_flexbox.asp)

Atas ialah kandungan terperinci Bagaimanakah kita boleh menambahkan elips (...) untuk menunjukkan pemotongan pada elemen `` berbilang baris dengan lebar dan ketinggian tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!