css3 - CSS equivalent to Photoshop's Justify-All -



css3 - CSS equivalent to Photoshop's Justify-All -

i'd take h2 element , span it's text across width of it's div.

text-align:justify;

only spreads text if it's width greater width of it's container... kind of photoshop's justify-left

css:

h2 {text-align: justify;} h2 span {width: 100%; display: inline-block;}

html:

<h2>this h2 heading<span></span></h2>

note adds unvisible line, resulting in much height. might want compensate that:

h2 {text-align: justify; height: 1.15em;}

and neat markup, working browsers other ie7 or below, utilize ::after selector:

h2::after { width: 100%; display: inline-block; content: "."; visibility: hidden; }

see demo fiddle of 3 solutions.

css css3 photoshop justify text-align

Comments

Popular posts from this blog

iphone - Dismissing a UIAlertView -

c# - Can ProtoBuf-Net deserialize to a flat class? -

javascript - Change element in each JQuery tab to dynamically generated colors -