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

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>

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

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>

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!

JavaScript jquery css for append this overflow https word

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn