Bagaimana untuk Mengubah Saiz DIV agar Sesuai dengan Teks yang Dibalut Menggunakan JavaScript?

Mengubah saiz DIV kepada Merangkul Teks Balut Menggunakan JavaScript

Dalam reka bentuk web, merangkum teks dalam elemen DIV selalunya boleh menimbulkan dilema. Walaupun mengubah saiz DIV untuk menampung satu baris teks adalah mudah, cabaran timbul apabila teks dibalut ke berbilang baris disebabkan oleh lebar maksimum yang telah ditetapkan. Dalam senario sedemikian, DIV mengekalkan saiz asalnya, menyebabkan jidar yang tidak sedap dipandang di sebelah kanan.

Isu ini tidak boleh diselesaikan semata-mata melalui CSS, yang memerlukan penerokaan penyelesaian JavaScript. Untuk mencapai matlamat ini, kami boleh memanfaatkan kod JavaScript berikut:

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`;

Dengan menentukan julat di sekeliling teks yang dibalut, kami boleh mendapatkan semula dimensi segi empat tepat terikatnya dan seterusnya melaraskan lebar DIV agar sepadan dengan dimensi tersebut. Pendekatan ini secara berkesan mengecilkan DIV untuk diselaraskan dengan tepat dengan teks yang dibalut, menghapuskan jidar yang tidak diingini dan membolehkan penjajaran yang betul.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz DIV agar Sesuai dengan Teks yang Dibalut Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!