{"id":336014,"date":"2021-03-16T07:56:58","date_gmt":"2021-03-16T14:56:58","guid":{"rendered":"https:\/\/css-tricks.com\/?p=336014"},"modified":"2021-03-16T08:34:47","modified_gmt":"2021-03-16T15:34:47","slug":"better-line-breaks-for-long-urls","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/better-line-breaks-for-long-urls\/","title":{"rendered":"Better Line Breaks for Long URLs"},"content":{"rendered":"\n

CSS-Tricks has covered how to break text that overflows its container<\/a> before, but not much as much as you might think. Back in 2012, Chris penned \u201cHandling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)\u201d<\/a> and it is still one of only a few posts on the topic, including his 2018 follow-up \u201c<\/a>Where Lines Break is Complicated. Here\u2019s all the Related CSS and HTML.<\/a>\u201d<\/a><\/p>\n\n\n\n

Chris\u2019s tried-and-true technique works well when you want to leverage automated word breaks and hyphenation rules that are baked into the browser:<\/p>\n\n\n\n

.dont-break-out {\n  \/* These are technically the same, but use both *\/\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n\n  word-break: break-word;\n\n  \/* Adds a hyphen where the word breaks, if supported (No Blink) *\/\n  hyphens: auto;\n}<\/code><\/pre>\n\n\n\n
But what if you can\u2019t? What if your style guide requires you to break URLs in certain places? These classic sledgehammers are too imprecise for that level of control. We need a different way to either tell the browser exactly where to make a break.<\/p>\n\n\n\n\n\n\n
Why we need to care about line breaks in URLs<\/h3>\n\n\n
One reason is design. A URL that overflows its container is just plain gross to look at.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Then there\u2019s copywriting standards. The Chicago Manual of Style<\/em>, for example, specifies when to break URLs in print<\/em>. Then again, Chicago gives us a pass for electronic documents\u2026 sorta:<\/p>\n\n\n\n
It is generally unnecessary to specify breaks for URLs in electronic publications formats with reflowable text, and authors should avoid forcing them to break in their manuscripts.<\/p>Chicago 17th ed., <\/em>14.18<\/a><\/cite><\/blockquote>\n\n\n\n
But what if<\/em>, like Rachel Andrew (2015) encourages us, you\u2019re designing for print<\/a>, not just screens? Suddenly, \u201cgenerally unnecessary\u201d becomes \u201cabsolutely imperative.\u201d Whether you\u2019re publishing a book, or you want to create a PDF version of a research paper you wrote in HTML, or you\u2019re designing an online CV, or you have a reference list at the end of your blog post, or you simply care how URLs look in your project\u2014you\u2019d want a way to manage line breaks with a greater degree of control.<\/p>\n\n\n\n
OK, so we\u2019ve established why<\/em> considering line breaks in URLs is a thing, and that there are use cases where they\u2019re actually super important. But that leads us to another key question\u2026<\/p>\n\n\n
Where are line breaks supposed to go, then?<\/h3>\n\n\n
We want URLs to be readable. We also don\u2019t want them to be ugly, at least no uglier than necessary. Continuing with Chicago\u2019s advice, we should break long URLs based on punctuation, to help signal to the reader that the URL continues on the next line. That would include any of the following places:<\/p>\n\n\n\n