overflow-wrap: long address in a narrow column

Useful to know

A long URL or identifier can extend a map and create a horizontal scrolling . overflow-wrap allows the browser to break such a string when there is no suitable usual transfer location. The anywhere value allows interruption of an otherwise uninterruptible sequence as needed. [1]

For a container with custom addresses, an initial example is .address { overflow-wrap: anywhere; }. The address remains the same text, but is displayed on more lines. No real spaces or hyphens are added to the value.

Use the rule on purpose. Carrying an identifier is a different task than shortening a long paragraph. If the component continues to go outside the column, also check the limitations of flex or grid items. Proper porting is part of the solution, but it does not correct any set minimum width.