Better Line Breaks for Long URLs

CSS-Tricks has previously addressed handling overflowing text, but comprehensive solutions for long URLs remain scarce. Chris Coyier's 2012 and 2018 articles ("Handling Long Words and URLs" and "Where Lines Break is Complicated") offer valuable insights, suggesting techniques leveraging browser-native word-break and hyphenation features:

.dont-break-out {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

However, these methods lack the precision needed for controlled URL breaks, particularly when adhering to specific style guides.

The Importance of URL Line Breaks

Aesthetic considerations aside, consistent URL formatting is crucial. Style guides, such as The Chicago Manual of Style, provide guidelines for URL breaks in print, though they offer leniency for digital formats. However, scenarios like print publications, PDFs, online resumes, or even maintaining visual consistency demand precise control over URL line breaks.

Strategic URL Break Placement

Readability is paramount. Following Chicago style, breaks should align with punctuation:

• After a colon or double slash (//)
• Before a single slash (/), tilde (~), period (.), comma (,), hyphen (-), underscore (_), question mark (?), number sign (#), or percent symbol (%)
• Before or after an equals sign (=) or ampersand (&)

Avoid introducing artificial hyphens; while soft hyphens are beneficial for word breaks, they can be misinterpreted within URLs. Prioritize breaks at existing punctuation points.

Mastering Line Breaks with <wbr></wbr>

The <wbr></wbr> element provides a solution. It signals a potential line break without forcing one, allowing the browser to choose the optimal break point. Consider this example from Chris Coyier's 2012 post:

<code>http://www.amazon.com/s/ref=sr_nr_i_o?rh=k:shark vacuum,i:garden&keywords=shark vacuum&ie=UTF8&qid=1327784979</code>

Adding <wbr></wbr> tags strategically:

http:<wbr>//<wbr>www<wbr>.<wbr>amazon<wbr>.com<wbr>/<wbr>s/<wbr>ref<wbr>=<wbr>sr<wbr>_<wbr>nr<wbr>_<wbr>i<wbr>_o<wbr>?rh<wbr>=<wbr>k<wbr>:shark<wbr> vacuum<wbr>,i<wbr>:garden<wbr>&<wbr>keywords<wbr>=<wbr>shark vacuum<wbr>&ie<wbr>=<wbr>UTF8<wbr>&<wbr>qid<wbr>=<wbr>1327784979</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

Manual insertion is tedious, necessitating automation. A JavaScript function using regular expressions can automate this:

function formatUrl(url) {
  var doubleSlash = url.split('//');
  var formatted = doubleSlash.map(str =>
    str.replace(/(?<after>:)/giu, '$1<wbr>')
      .replace(/(?<before>[/~.,\-_?#%])/giu, '<wbr>$1')
      .replace(/(?<beforeandafter>[=&])/giu, '<wbr>$1<wbr>')
    ).join('//<wbr>');
  return formatted;
}</wbr></wbr></wbr></beforeandafter></wbr></before></wbr></after>

Implementation and Browser Support

A live demo showcases the effectiveness of this approach. Integration with static site generators further streamlines the process. <wbr></wbr> enjoys broad browser support, with exceptions primarily in older IE versions. A CSS workaround using a pseudo-element and a zero-width space enhances compatibility:

wbr:before {
  content: "\200B";
  white-space: normal;
}

Prioritizing well-formatted URLs enhances user experience, regardless of design style or target medium.

References

• Andrew, Rachel. 2015. “Designing for Print with CSS.” Smashing Magazine, January 7. https://www.php.cn/link/68e4593563e1b425a7717504bca103d6
• Andrew, Rachel. 2018. “A Guide to the State of Print Styles in 2018.” Smashing Magazine, May 1. https://www.php.cn/link/d8001036d6702e430b8e092484444ee1
• Coyier, Chris. 2012. “Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc).” CSS-Tricks, January 30, 2012. Last Modified July 25, 2018. https://www.php.cn/link/f4d1f9e7d8c4235ad52d48b2f213cc38
• Coyier, Chris. 2018. “Where Lines Break is Complicated. Here’s all the Related CSS and HTML.” CSS-Tricks, May 9, 2018. Last modified April 24, 2020. https://www.php.cn/link/a18d17349a19926e1944714f747d330d
• The Chicago Manual of Style. 2017. 17th ed. Chicago: University of Chicago Press. https://www.php.cn/link/2e3a567dcc390811e4dfa8d478e4a149
• Prince. n.d. “Convert HTML to PDF with CSS.” Accessed February 25, 2021. https://www.php.cn/link/13d8efdc6a5cb721fe7031be062b9b74
• The Unicode Consortium. 2009. “Special Areas and Format Characters.” In The Unicode Standard. Version 5.2.0. https://www.php.cn/link/99407a87a33e79517280e0fdacdaa713
• WHATWG. n.d. “HTML: Living Standard.” Accessed February 25, 2021. https://www.php.cn/link/767d3dd25ed652d33fa7743c0c2400fa

The above is the detailed content of Better Line Breaks for Long URLs. For more information, please follow other related articles on the PHP Chinese website!