How to Inspect and Control CSS overflow-wrap in Safari Web Inspector

When building responsive web layouts for mobile screens and variable-width viewports, handling long strings of unbroken text is a recurring design challenge. Content such as lengthy URLs, hexadecimal commit hashes, cryptographic wallet addresses, file paths, and unhyphenated compound words can easily exceed the physical width of a container. When this happens, text overflows the element bounding box, overlapping adjacent columns, breaking flexbox calculations, and causing awkward horizontal scrolling.

The CSS overflow-wrap property (originally standardized as word-wrap by Microsoft and adopted into modern CSS) controls whether the browser rendering engine is permitted to break lines inside words that would normally be treated as unbreakable units. Safari on macOS and iOS includes full WebKit support for modern overflow-wrap keyword values. Using Safari Web Inspector, web developers can inspect text overflow issues, test breaking behaviors in real time, and diagnose layout bugs across Apple platforms.

Understanding overflow-wrap Values and Breaking Rules

The overflow-wrap property tells the browser when it is acceptable to break an otherwise unbreakable string of characters to prevent overflow. It supports three primary values:

• normal: Default behavior. Lines may break only at normal word break opportunities (such as spaces, hyphens, or zero-width spaces). Unusually long words overflow the container boundary.
• break-word: The browser first attempts to break the line at an allowed break point. If the word is still too long to fit on its own line within the container width, the browser breaks the word arbitrarily at an arbitrary character to prevent overflow.
• anywhere: Similar to break-word, but when calculating the minimum content width (min-content) of an intrinsic container (such as inside a flex item or CSS grid column), the browser considers every character position as a soft break opportunity. This allows the container to shrink to the width of a single character rather than expanding to accommodate the unbroken word.

The standard property syntax is applied to text containers:

/* Standard responsive container text protection */
.user-comment {
    overflow-wrap: break-word;
    word-wrap: break-word; /* Legacy alias for complete browser compatibility */
}

/* Allow intrinsic grid items to shrink cleanly */
.code-preview-cell {
    overflow-wrap: anywhere;
}

Enabling Developer Features in Safari

To inspect layout properties and test CSS rules in Safari, enable developer features on macOS:

1. Launch Safari on your Mac and open Settings (or press Command + ,).
2. Navigate to the Advanced pane.
3. Check the box labeled Show features for web developers.
4. Close the Settings window.

Right-click the overflowing text element on your webpage and select Inspect Element to launch Safari Web Inspector.

Inspecting Text Overflow in the Elements and Computed Panels

When Safari Web Inspector opens, select the text node within the Elements DOM tree. Navigate to the Computed tab in the right-hand panel:

1. Filter the computed properties list for overflow-wrap or word-wrap.
2. Verify whether the property is actively computed as break-word, anywhere, or normal.
3. Check the width and max-width properties of the parent container to confirm that an explicit constraint is applied. overflow-wrap only triggers breaks when the container has a bounded inline axis width.
4. Inspect the Layers tab or hover over the element in the DOM tree to view WebKit’s visual box model overlay, which reveals whether the text exceeds the content box boundary.

Testing overflow-wrap Dynamically in the Styles Pane

You can test and observe breaking behavior live without modifying source code:

1. Switch to the Styles tab in Safari Web Inspector.
2. Click inside the CSS declaration block for the target container.
3. Add the declaration: overflow-wrap: break-word;.
4. Observe Safari’s WebKit rendering engine instantly recalculate text layout, wrapping long URLs and hashes onto new lines while preserving normal word spacing across standard prose.

To test how the layout behaves inside a flexbox or grid container where minimum content sizing is causing horizontal blowouts, test the anywhere value:

/* Test anywhere keyword in Safari Styles pane */
overflow-wrap: anywhere;

Comparing overflow-wrap with word-break

A common point of confusion among web developers is the difference between overflow-wrap and word-break:

• overflow-wrap: break-word;: Prioritizes typography. It keeps the word intact on the line if possible, moves the word to a fresh line, and only breaks the word if it cannot fit on an entire line by itself.
• word-break: break-all;: Aggressively breaks words at the exact right margin boundary regardless of whether moving the word to the next line would have prevented the break. This often results in awkward typographic breaks in ordinary sentences.

In Safari Web Inspector, you can verify that overflow-wrap: break-word; maintains natural word flow across standard body text while providing reliable protection against overflow caused by unbreakable strings.