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

Unbroken strings—such as long URLs, cryptographic transaction hashes, and lengthy chemical compound names—frequently break responsive layouts by overflowing their container boundaries. To handle overflow gracefully without causing unwanted horizontal scrollbars, CSS provides overflow-wrap and word-break. However, subtle differences in how WebKit renders these properties compared to other browser engines can produce unexpected line breaks or truncated text. Safari Web Inspector provides specialized layout visualization tools that make it simple to inspect word breaking and diagnose typographic overflow.

Understanding overflow-wrap vs word-break

While often used interchangeably, these two properties serve distinct typographic roles:

• overflow-wrap: break-word (formerly word-wrap: break-word): The preferred approach for modern responsive typography. The browser attempts to break lines at normal word boundaries first. Only if an entire word cannot fit onto a line on its own will the engine break the word between letters.
• word-break: break-all: Aggressively breaks words at the exact container boundary regardless of word meaning. While effective at preventing overflow, it can split short everyday words mid-syllable, diminishing readability.
• word-break: keep-all: Prohibits word breaking in Chinese, Japanese, and Korean (CJK) text, ensuring characters from the same term remain grouped.
• overflow-wrap: anywhere: Similar to break-word, but allows soft wrap breaks introduced by breaking words to be considered when calculating min-content intrinsic sizes.

Configuring Resilient Typographic Container Styles

Implement a clean CSS pattern that guarantees unbroken URLs wrap safely within cards and sidebar widgets:

/* Resilient text container */
.data-card-content {
    min-width: 0; /* Prevents flexbox children from expanding past parent bounds */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto; /* Adds soft hyphenation where supported */
}

Inspecting Word Breaks in Safari Web Inspector

To diagnose text overflow using Safari Web Inspector on macOS:

1. Open Safari and navigate to the affected web page.
2. Right-click the overflowing text element and choose Inspect Element.
3. In the Elements panel, examine the computed box properties in the Styles sidebar. Verify that overflow-wrap: break-word is not being overridden by an inherited parent rule.
4. Select the Computed tab and check the width and max-width values to confirm that the text container has a defined boundary. If a flex or grid parent has min-width: auto, the child container may expand indefinitely.
5. Use Safari’s Responsive Design Mode (Option + Command + R) to test screen widths down to 320px, confirming that long strings wrap neatly without overflowing viewport edges.

Debugging CJK and Multilingual Text Flow

When developing multilingual applications, testing line breaks in Safari requires verifying language tags (e.g. <html lang="ja">). Without proper language declaration, WebKit cannot apply appropriate line-breaking dictionary rules, leading to unnatural breaks. You can modify the lang attribute live within the Web Inspector DOM tree to verify that Safari adapts its line-breaking algorithm correctly.