fooman

# April 29, 2013 at 10:03 am

I’m doing a site and the design has a lot of one-line justified text sections. It’s kinda important to keep it this way I guess.

Just curious, is there a way to do this or fake it without using images?
Text-align: justify; doesn’t do anything with single-line sections.
Using pixel-values for font-size isn’t reliable from browser to browser.

Anyone have any guidance?

Paulie_D

# April 29, 2013 at 10:05 am

>one-line justified text sections

Even if it’s just two words?

That sounds pretty awful.

>It’s kinda important to keep it this way I guess.

Is it…have you checked?

Merri

# April 29, 2013 at 10:28 am

You can hack it like this:

h1 {
height: 1.5em;
line-height: 1.5em;
text-align: justify;
text-align-last: justify;
}

h1:after {
content: ”;
display: inline-block;
width: 100%;
}

I guess this is the easiest way to get the effect. Hard limits it to one line though. I don’t have time to verify how wide the browser support status is, but text-align-last is IE6+ I think. There are also other browser vendor specific properties, but I can’t recall those from the top of my head. Mobile web limits my search-ability right now.

Merri

# April 29, 2013 at 11:33 am

Ah, that way. No CSS way, but you can push some JavaScript to do it: http://codepen.io/Merri/pen/dquki

Someone else is probably able to shorten the jQuery code.

Merri

# April 29, 2013 at 1:50 pm

In this case magic numbers could be poison as not everyone may have the intended font. So I’d say do what you can with CSS (`text-align: center;`) and then throw JavaScript for those who support it (the vast majority).

Images could be other alternative that isn’t mentioned yet, but that would require more work. It is quite easy to give `width: 100%;` to images and have them scale. All the rest isn’t that easy.

wolfcry911

# April 29, 2013 at 2:57 pm

perhaps this would work:

http://fittextjs.com/

noahblon

# October 14, 2013 at 1:21 pm

Fantastic tip Merri!