Menu
How would one justify this text?? I have tried and searched for days to get something so simple to work..
Ex:
HTML:
<div id="justify">
<p>I just want this to justify..</p>
</div>
CSS:
#justify {
width: 100%;
background: #D33;
}
#justify p {
margin: 0 auto;
max-width: 70%;
list-style: disc outside none;
text-align: justify;
display: list-item;
background: #ccc;
}
Here on JSFiddle:
http://jsfiddle.net/xDqwF/
Any help would be much appreciated.
356
#justify p:after {
content: "";
display: inline-block;
width: 100%;
}
Through some HTML Trickery, this should work. I found it on a blog post ages ago when I had a similar problem. Check it out on the JSFiddle
http://jsfiddle.net/xDqwF/2/
163
That's simple, put the text in a <p> an edit this in CSS:
HTML:
<div>
<p id="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.ultricies n.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.ultricies n.</p>
</div>
CSS:
div {
height:200px;
width:350px;
}
#justify {
text-align: justify;
}
Live demo.
44
<html>
<head>
<style type="text/css">
.justify {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<div class="justify">
<p>This is justified</p>
</div>
</body>
</html>
According W3C school text-justify is only supported on IE, but on that since IE 5.5
text-align can specify justification, as mentioned above, but some cautions:
In all browsers I've checked justification is handled by increasing interword spacing. The typical amount of surplus space is 2-4 characters. Divided up on a typical line of 10 words or so, this looks tolerably ok.
On lines with fewer words the surplus space has be absorbed in fewer spaces. The result is large gaps. This is a problem in multi-column layouts, or captions under portrait oriented pictures.
FWIW on a good DTP program, the space for justifying is split between the inter-word spaces, and the inter letter spacing. Good fonts have in internal table of kerning hints to control this spacing. (You can't put as much space between "Y" and "o" as you can between "m" and "n" without it looking odd.)
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
