Sometimes, for the purposes of style, we want to justify text in web pages.
Justification, in a typographical sense, means that text stretches to line up precisely on the right and left margins, and appears straight down the edges (unlike this page, which is aligned left, and therefore is straight down the left edge, but the lines finish where the last word that fits the line ends – a jagged edge at the right-hand side, which we don’t mind!).
Our word processors, like Microsoft Word, and others, can do this for us, so why can’t the same look be achieved easily on a browser?
Table of Contents
A Justified Paragraph!
The issues are that there are a lot of browsers, a lot of screen resolutions, and a lot of different text sizes that a web page can be rendered in. Unlike a word processor, which has a page size that is fixed, and a font size you choose, we, as web designers and developer, don’t know what size of device will be accessing our beautifully crafted page, nor do we know if they will be bumping the text size, hitting the zoom button, or flipping the screen size a different way by dragging the corner of their visible screen window in or out and therefore changing our responsive site to be a different size.
(note, the above paragraph is justified!)
But luckily for those of us who craft responsive websites, we can still justify websites even on Chrome, Firefox, Internet Explorer and Safari (and therefore have a fighting chance of covering most of the possible browser combinations!) using Cascading Style Sheets (or CSS).
CSS Code to Justify Your Paragraphs
The code below will justify your paragraph (<p></p>) text:
p {
text-align:justify;
text-justify:inter-word;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-wrap: normal;
}
What the Code Does
The first part of the code tells the browser to justify the text. The second part tells it we want the spacing to be between the words (i.e. don’t stretch the text itself, just the spaces please!), while the hyphens and word-wrap parts are saying “don’t break the words up and hyphenate them mid-word please” – obviously, if you don’t mind a bit of hyphenation, then remove those parts, but we find the above code gives the best cross-browser performance insofar as the text looks pretty much the same on all browsers with the above code.
Leave A Comment if this Helped (or didn’t)
Leave a comment below if this helped you to get stylish justified text into your website – or if you have a related issue you would like to find out the answer to.
Isn’t bootstrap class enough to justify text?
Not everyone wants to use Bootsrap – using a framework is great, but it doesn’t teach you anything, and wouldn’t make much of a tutorial… It would be like posting a tutorial on “how to clean out your car air filter” which read “buy a new air filter”. That’s not the purpose of this post.