Header
Allowing for Reflow with Long URLs
Long URLs can break reflow when the page is zoomed. The objective of this technique is to present URLs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels or a vertical scroll bar at a height equivalent to 256 CSS pixels. This is done by using CSS techniques that adapt to the available viewport space. Note: Using human readable text links, rather than long URLS, is better for usability and accessibility.
By default most browsers will wrap long URLs at the following characters:
- "-" Hyphen
- " " Space
- "?" Question (IE, Chrome, Safari)
- "&" Ampersand (Firefox only)
Sometimes these are not enough to ensure that long URLs will not overflow the viewport. Because of browser link wrapping rules (see list above), links will wrap or not in different places. Note: Due to browser specific CSS, all examples below wrap in IE/Edge. The button has no effect in IE/Edge.
The default state of this page is that no anchors are styled. You should see links breaking the boundaries of their containers. Some of which will cause horizontal scrolling. When the style 'a.wrapped {overflow-wrap: break-word;} is toggled with the button, the long URLs will wrap within their respective containers.
Example 1 - URL with words, spaces, dashes, and underscores
- No style applied: http://Iterative.approaches%20to-corporate_strategy.net/foster collaborative thinking%20to.further/the_overall-value proposition.htm
Example 2 - URL with equal signs, underscores, ampersands, and dashes. Note: due to the * selector all examples work in IE/Edge styled or not.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at facilisis porta.
Panel 1
Nam venenatis turpis in erat tincidunt, non laoreet sem egestas. Etiam feugiat vehicula risus, non lobortis turpis aliquam nec. Nunc nec cursus arcu. In felis sapien, dictum a metus in, vehicula fermentum sem. Morbi in aliquam lorem. Suspendisse in interdum nunc.
Example 1 - URL with words, spaces, dashes, and underscores
Note: Due to specific browser CSS, all examples work in IE/Edge. The button has no effect.
- No style applied: http://Iterative.approaches%20to-corporate_strategy.net/foster collaborative thinking%20to.further/the_overall-value proposition.htm
Example 2 - URL with equal signs, underscores, ampersands, and dashes.
Note: Due to specific browser CSS, all examples work in IE/Edge. The button has no effect.
Panel 2
Curabitur semper dui dui, quis interdum felis ullamcorper ut. Sed mauris eros, ullamcorper eget dolor a, fringilla consequat mi. In tortor lorem, varius in accumsan et, volutpat eu dolor. Proin fermentum velit non nulla blandit pharetra.
Example 1 - URL with words, spaces, dashes, and underscores
Note: Due to specific browser CSS, all examples work in IE/Edge. The button has no effect.
- No style applied: http://Iterative.approaches%20to-corporate_strategy.net/foster collaborative thinking%20to.further/the_overall-value proposition.htm
Example 2 - URL with equal signs, underscores, ampersands, and dashes.
Note: Due to specific browser CSS, all examples work in IE/Edge. The button has no effect.