How to Resize a DIV to Fit Wrapped Text Using JavaScript?

Resizing a DIV to Embraced Wrapped Text Using JavaScript

In web design, encapsulating text within a DIV element can often pose a dilemma. While resizing the DIV to accommodate a single line of text is straightforward, the challenge arises when the text wraps onto multiple lines due to a predetermined maximum width. In such scenarios, the DIV retains its original size, resulting in unsightly margins on the right.

This issue cannot be resolved purely through CSS, necessitating the exploration of JavaScript solutions. To achieve this, we can leverage the following JavaScript code:

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

By defining a range around the wrapped text, we can retrieve its bounding rectangle dimensions and subsequently adjust the DIV's width to match those dimensions. This approach effectively shrinks the DIV to align precisely with the wrapped text, eliminating unwanted margins and enabling proper alignment.

The above is the detailed content of How to Resize a DIV to Fit Wrapped Text Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!