Handling overflow

On sites that can expect code blocks or long strings of unbroken (no spaces or word breaks) text, Grail's containers can exceed their specified widths. This is not a problem unique to Grail, but one that is inherent to many site layouts. This page details a few methods of solving that issue.

Breaking text

If you have control over how the text is rendered, we recommend adding wbr elements, non-breaking spaces, or using CSS to ensure the text wraps.

If this is not possible, then it might be time to invest in a side scrolling container (such as the one used by code blocks and tables on this site).

iamalongstringofunbrokentextthatcouldpotentiallycausealayoutcontainertoexceedthewidthofthescreen!

Overflow

Although far from ideal, an easy way of ensuring text wraps (and inner scrolling containers scroll) is to set overflow:hidden on the parent container that is growing too large. This ensures text wraps, but has several downsides. For example, UI elements that are intended to go beyond the container (such as a popup menu) may get cut off.