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

The modern CSS Text Level 4 specification splits text wrapping into dedicated sub-properties: text-wrap-mode and text-wrap-style. While developers historically relied on the monolithic white-space property, text-wrap-mode provides granular control over whether text is allowed to wrap onto multiple lines. In Apple Safari, developers can inspect, test, and refine this property directly using Safari Web Inspector.

Understanding CSS text-wrap-mode Values

The text-wrap-mode property accepts two primary keyword values:

• wrap: The standard default behaviour where text breaks across lines at allowable soft-wrap opportunities (such as spaces, hyphens, and word boundaries) when content exceeds the container width.
• nowrap: Prevents line breaks entirely, forcing text to render along a single continuous horizontal line regardless of container dimensions.

Unlike white-space: nowrap, setting text-wrap-mode: nowrap does not collapse whitespace sequences or suppress newline characters, granting precise control over wrapping behaviour without unintentionally altering whitespace rendering rules.

Accessing and Enabling Safari Web Inspector

To inspect typography and CSS rules in Safari on macOS, ensure developer features are active:

1. Launch Safari on macOS.
2. Open Settings (or Preferences) via Cmd + ,.
3. Navigate to the Advanced tab and check the option labeled Show features for web developers (or Show Develop menu in menu bar).
4. Right-click any text element on your target web page and select Inspect Element.

Testing text-wrap-mode in the Styles Panel

Once Safari Web Inspector is open, follow these steps to test wrapping rules interactively:

1. In the Elements DOM tree, select the target container or heading element.
2. In the right-hand sidebar, navigate to the Styles panel.
3. Inside the relevant CSS declaration block, click the empty space below existing declarations to create a new property row.
4. Enter text-wrap-mode as the property name and set its value to nowrap or wrap.

   .hero-headline {
     text-wrap-mode: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

5. Toggle the checkbox beside the property to observe how Safari reflows the typographical layout in real time.

Verifying Rendered Metrics in the Computed Tab

To ensure that inherited styles or legacy CSS declarations do not override your rules:

• Switch to the Computed tab in the right pane of Safari Web Inspector.
• Filter for text-wrap-mode to view the resolved value applied by the WebKit rendering engine.
• Expand the arrow beside the property to view the stylesheet origin and priority hierarchy.

Testing text-wrap-mode within Safari Web Inspector guarantees that your responsive typography renders predictably across iOS, iPadOS, and macOS viewport breakpoints.