justify one line of html text to fill an entire line?

C

4

7

I have a navigation bar with links inside and its around the height I'd like it right now but I want the buttons to be evenly spaced but text-align:justify; isn't working. I'm I doing something wrong?

http://jsfiddle.net/xuEY6/

Celt answered 13/4, 2014 at 2:30 Comment(2)

Like this jsfiddle.net/j08691/xuEY6/1? – Lashundalasker 13/4, 2014 at 2:36

possible duplicate of Justify the last line of a div? – Lachrymator 13/4, 2014 at 2:44

L

12

Add

#navigation:after { /* Justify last line */
    content: '';
    display: inline-block;
    width: 100%;
}
#navigation { /* Fix added space */
    height: 1.15em;
    line-height: 1.15;
}

Demo

Lachrymator answered 13/4, 2014 at 2:40 Comment(2)

Thanks, but why the heck does this work? do the a elements just need something to scale against? – Celt 13/4, 2014 at 2:50

@SpencerKillen text-align: justify doesn't justify the last line. Then, you can add a pseudo-element with width:100% which will fall to the next line, so the line you want to justify won't be the last one and it will be justified. – Lachrymator 13/4, 2014 at 3:9

T

13

If you add:

text-align-last:justify;

to the #navigation line you will get what you are looking for.

Theirs answered 21/6, 2019 at 19:41 Comment(0)

L

12

Add

#navigation:after { /* Justify last line */
    content: '';
    display: inline-block;
    width: 100%;
}
#navigation { /* Fix added space */
    height: 1.15em;
    line-height: 1.15;
}

Demo

Lachrymator answered 13/4, 2014 at 2:40 Comment(2)

Thanks, but why the heck does this work? do the a elements just need something to scale against? – Celt 13/4, 2014 at 2:50

@SpencerKillen text-align: justify doesn't justify the last line. Then, you can add a pseudo-element with width:100% which will fall to the next line, so the line you want to justify won't be the last one and it will be justified. – Lachrymator 13/4, 2014 at 3:9

C

5

If you are okay without Safari support (as of 2021), there is now a native solution to this, the text-align-last property:

text-align-last: justify;

Apply this to any text and its last (or only) line will be justified, while the regular text-align property affects all lines except the last (or none if it's only one line).

This is supported in all major browsers except Safari. Chrome 47+, Edge 12+, Firefox 49+, and Opera. Even IE 5.5+ supports it(!), but text-align: justify; must also be set to work.

Safari has a bug report to track its status, however it has been the better part of a decade without any updates so Apple really ought to step up its game soon. The bug is marked as "RESOLVED FIXED" but that is not the case.

Crumble answered 14/7, 2019 at 8:24 Comment(0)

G

1

your links need to have width to fill the line. specify the with as a % to fill the line

take a look at this http://getbootstrap.com/components/#nav-justified

Gooding answered 13/4, 2014 at 2:35 Comment(0)

Recommended topics

Hot tags