Allowing for Reflow with Long URLs

When to Use

This technique is applicable to Cascading Style Sheet / HTML technologies.

Description

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 a human readable text link, rather than a long URL, is better for usability and accessibility.

By default most browsers will wrap long URLs at the following characters:

Sometimes these are not enough to ensure that long URLs will not overflow the viewport.

Examples

Example: Breaking long URLs

Using the following CSS will cause long URLs to break at appropriate places (hyphens, spaces, etc.) and within words without causing reflow.

List of CSS declarations used and why they are used:

    a {overflow-wrap: break-word;}

Note: IE and Edge only support this declaration when used with the following declaration.

    /* specific for IE10 & 11, they do not support these declarations with "a" selector, must use the * (all elements) selector.*/

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

         * { word-wrap: break-word;}

    }


    /* for all Edge, does not support these declarations with "a" selector, must use the * (all elements) selector. */

    @supports (-ms-ime-align:auto) {

        * { word-wrap: break-word;}

    }

Working Example

Tests

Procedure

  1. Display content in a user agent capable of 400% zoom with a viewport-width of 1280 CSS pixels.
  2. If the text is read horizontally: Zoom in by 400%.
  3. Check whether URL content and functionality is available without horizontal scrolling.
  4. If the text is read vertically: Set the viewport height to 256 CSS pixels.
  5. Check whether URL content and functionality is available without vertical scrolling.

Note: If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.

Expected Results