How do you prevent text from spilling over the edges of boxes when the browser's text size gets increased?

Question

As a web developer, how do you prevent text from spilling over the edges of boxes when the browser's text size gets increased?

Answer 1

There isn't much else to do that to ensure that your layout doesn't constrain height, so that the text can still fit in the box.

If you absolutely need to constrain the size, you can use overflow: auto CSS declaration to have the box display scrollbars when the content is too large to fit.

Answer 2

Ensure that all sizes are declared in "em" units (an "em" is the width of a single letter "m" in whichever font size is currently being used). If you specify your sizes in pixels (as is most common), then your design will not resize if the size of the font is changed.

Answer 3

Most modern browsers default to zooming the entire page, nowadays, not just text - so this problem will go away as IE7+IE6 slowly die.