<\/span><\/h3>\nThe 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.<\/p>\n
(note, the above paragraph is justified!)<\/p>\n
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).<\/p>\n
<\/span>CSS Code to Justify Your Paragraphs<\/span><\/h2>\nThe code below will justify your paragraph (<p><\/p>) text:
\np {
\ntext-align:justify;
\ntext-justify:inter-word;
\n-webkit-hyphens: none;
\n-moz-hyphens: none;
\n-ms-hyphens: none;
\nhyphens: none;
\nword-wrap: normal;
\n}<\/code><\/p>\n<\/span>What the Code Does<\/span><\/h3>\nThe 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.<\/p>\n