Bagaimana untuk Saiz DIV secara Dinamik kepada Kandungan Teks Balut dengan JavaScript?

Mencapai Saiz DIV Dinamik untuk Teks yang Dibalut Menggunakan JavaScript

Mengecilkan DIV sehingga tahap kandungan teks yang dibalut menggunakan CSS sahaja menimbulkan cabaran. Walau bagaimanapun, JavaScript boleh digunakan untuk mengatasi had ini dan mencapai kelakuan yang diingini.

Dalam contoh kod yang disediakan, elemen DIV ("mengecut") dengan lebar maksimum 130px mempamerkan jidar yang tidak diingini disebabkan oleh pembalut teks . Untuk menangani isu ini, JavaScript digunakan untuk mengira lebar sebenar kandungan yang dibalut dan melaraskan saiz DIV dengan sewajarnya.

<code class="js">const range = document.createRange();
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 menggunakan fungsi createRange() untuk menentukan julat yang merangkumi julat yang dibalut teks. Kemudian, getBoundingClientRect() mengira segi empat tepat terikat untuk julat yang ditentukan, dengan berkesan menentukan lebar kandungan teks. Akhirnya, lebar DIV ditetapkan secara dinamik agar sepadan dengan lebar ini, menghasilkan kesesuaian yang selesa di sekeliling teks yang dibalut.

Atas ialah kandungan terperinci Bagaimana untuk Saiz DIV secara Dinamik kepada Kandungan Teks Balut dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!