Learn a Better Line Breaks for Long URLs – Ninja CSS Tricks!

CSS – Cascading Style Sheet, one from the two core technologies to build a web page. Content – It definitely plays an important role for any website, but what if it looks pathetic to visitors!? CSS & HTML geeks work to place content so that it attracts readers and would like to engage more with the website through contents.

There can be a time when a long text can overflow the layout or images. See the image (source – internet):

Handling long URLs such as Ellipsis, Hyphenation, Forcing breaks, and texts are one big challenge for CSS experts. Solving such issues can be literally nerve-wracking.

In this blog post, we will share a few tried & tested CSS tricks that definitely help web developers to break lines for long URLs or texts.

Below CSS lines will work when you want to leverage automated hyphenation rules and work breaks that are active in the browser:

.dont-break-out {

  /* These are technically the same, but use both */

overflow-wrap: break-word;

word-wrap: break-word;

word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */

hyphens: auto;

}

This will work, but what if it will not work? Or if your style guide requires you to break URLs in chunks? Here are different ways to tell the browser where to take a break.

Line breaks in URLs

Why we should care about line breaks – Design is an utmost concern. A URL that overflows its container seems a complete mess to look at. Whether you are designing an online CV, publishing a book, creating a PDF version of a research paper, or have found references at the end of any article, it’s necessary to learn line breaks with a greater hold.

But why it is necessary to break the line in the first place?

We want URLs or any texts to be readable and don’t look like a mess. According to sources, we should break long URLs based on punctuation – It will signify to the reader that the URL continues on the next line, get some insights into which one it could be:

– After a double slash or a colon

– Before or after an ampersand sign (&) or an equals sign

– Before a comma, a tilde (~), an underline, a question mark, a percent symbol, a period, or a number sign

Here, our goal is to break URLs before and after the appropriate punctuation marks. Since soft hyphens are good for breaking words but impact URLs badly, reading long URLs or texts is hard, and thus we can break long words and strings within URLs.

Control Line Breaks

There is an HTML element: <wbr>, which represents a line break opportunity. Through it, you can tell the browser to break the line from the place where you need to.

Let’s take a random URL to understand it better: https://www.amazon.in/Furniture/b?ie=UTF8&node=1380441031

And add in some <wbr> tags,

https:<wbr>//<wbr>.<wbr>amazon<wbr>.in<wbr>/<wbr>Furniture/<wbr>b?

<wbr>ie=<wbr>UTF8&<wbr>node=<wbr>1380441031

The <wbr> HTML5 element works in almost every browser in this time. So, the trick will work, definitely.

One last trick,

Use a pseudo-element to insert a zero width space, which is something how the HTML element <wbr> do in UTF-8 encoded pages.

wbr:before {

/* Unicode zero width space */

content: “\200B”;

white-space: normal;

}

It’s worthwhile to write HTML and CSS with URLs and line breaks into consideration. We hope, you find this guide suitable to tackle long URLs or text overlap issues. For more such guide, keep on reading Studio45 blogs.