Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengecilkan DIV secara Dinamik kepada Teks yang Dibalut Menggunakan JavaScript?

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

Mary-Kate Olsen
Lepaskan: 2024-10-29 10:03:29
asal
957 orang telah melayarinya

How to Dynamically Shrink a DIV to Wrapped Text Using 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>
Salin selepas log masuk

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>
Salin selepas log masuk
<code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}</code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan