Bagaimana untuk Mengecilkan DIV secara Dinamik kepada Teks yang Dibalut Menggunakan JavaScript?

Mengecilkan DIV kepada Teks Balut Secara Dinamik Menggunakan JavaScript

Mengecutkan DIV untuk menampung teks biasanya mudah. Walau bagaimanapun, apabila teks dibalut kepada berbilang baris disebabkan oleh kekangan lebar maksimum, DIV gagal mengecut dengan sewajarnya. Ini boleh mencipta margin yang tidak sedap dipandang di sebelah kanan DIV.

JavaScript Solution

Memandangkan penyelesaian CSS tulen tidak boleh dilaksanakan, kami beralih kepada JavaScript untuk pendekatan dinamik. Coretan kod berikut menggambarkan cara:

<code class="javascript">const range = document.createRange();
const p = document.getElementById('good');
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);
const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;</code>

Coretan kod ini melakukan perkara berikut:

1. Mencipta julat yang merangkum teks.
2. Mendapatkan clientRect teks.
3. Menetapkan lebar DIV kepada lebar clientRect.

Contoh Penggunaan< /h3>

<code class="html"><p id="bad">This box has a max width but also_too_much_padding.</p>
<p id="good">This box has a max width and the_right_amount_of_padding.</p></code>

<code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}</code>

Contoh ini mencipta dua kotak dengan padding yang berbeza. Kotak pertama menunjukkan masalah asal, manakala kotak kedua menggunakan penyelesaian JavaScript untuk mengecil secara dinamik kepada lebar teks.

Atas ialah kandungan terperinci Bagaimana untuk Mengecilkan DIV secara Dinamik kepada Teks yang Dibalut Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!