text-align justify not working

Question

I'm trying to justify the text within this p tag so that it perfectly fits the width of the p.

<p align="justify" style="text-align: justify !important; color:#fff; margin:0px; font-weight:bold; width:487px; border:Solid 1px red;">blah blah blah</p>

but the text just wont justify! any idea why?

thanks for any help.

score 42 · Answer 1 · edited Mar 11 '18 at 17:16

42

You can use the solution described here: http://blog.vjeux.com/2011/css/css-one-line-justify.html

This will justify a single line but adds a space after, so if you know the height, you can specify it with overflow:hidden to conceal it and still get the justification.

.fulljustify {
     text-align:justify;
    }
    .fulljustify:after {
        content: "";
        display: inline-block;
        width: 100%; 
    }
    #tagline {
        height: 80px;
        overflow: hidden;
        line-height: 80px; /* vert-center */
    }

<p id="tagline" class="fulljustify">Blah blah blah</p>

edited Mar 11 '18 at 17:16

sdgluck

24,894
8
75
90

answered Feb 07 '12 at 17:51

manafire

5,984
4
43
53

1

For a single line, this – Scott Grodberg Jun 16 '14 at 19:17
this doesn't work in IE8 and FF lower versions. do you know some way to implement without using `:after` pseudo code and `content`? thanks – Miron May 17 '16 at 02:24

score 38 · Answer 2 · answered Jun 03 '11 at 14:30

38

If your text doesn't span more than one line, justifying doesn't do anything. Your text has to wrap to the next line, and then the FIRST line will be justified, but not the second.

answered Jun 03 '11 at 14:30

Brett

4,051
2
26
39

2

darn. so theres no css way to justify 4 words in a 487 width p? – phil Jun 03 '11 at 14:31
is correct. You also needed to change the `color` from white on a white background to see this. http://jsfiddle.net/5RpQr/ – Jason Gennaro Jun 03 '11 at 14:34
@jason gennaro - yeah, i spent a minute trying to figure out why i didn't see anything in the fiddle... haha – Brett Jun 03 '11 at 14:35
.haha @phil, see my answer for a possible other solution re justifying four words – Jason Gennaro Jun 03 '11 at 14:40
Wow, that's really confusing, e.g. when in ckeditor setting the first line to justify, you won't see any changes. I wasted an hour figuring that out, thinking the plugin was broken. Hah! – Michiel Cornille Feb 03 '14 at 09:57

score 13 · Answer 3 · answered Dec 20 '13 at 09:51

13

Chrome doesn't support it but in Firefox and IE, you can use text-align-last: justify;. For a cross-browser solution, we have to use what @onemanarmy posted ;)

answered Dec 20 '13 at 09:51

alijsh

842
7
7

2

As of Dec 2016, this is now supported in all major browsers (65%) and is the best solution. – Dec 07 '16 at 02:33
Yes, this is now the best (and simplest) solution.Works great in chrome. – John - Not A Number Jan 20 '18 at 02:30
1

Doesn't work in Safari. It's the default browser on OS X, so I'd consider it a major browser. – Gavin Feb 08 '18 at 13:43
This is the solution I was looking for. Works in chrome too. Thanks a lot – Rajkumar Kumawat Dec 04 '19 at 14:53

score 9 · Answer 4 · answered Jun 03 '11 at 14:38

9

If you wanted to justify four words in 487px you could try using word-spacing in your css.

I used word-spacing:8em; for bla bla bla bla but you could adjust as necessary.

http://jsfiddle.net/5RpQr/1/

answered Jun 03 '11 at 14:38

Jason Gennaro

34,535
8
65
86

@phil - Just remember that if you change your words, the word spacing must change too – Brett Jun 03 '11 at 14:42

score 7 · Answer 5 · answered Mar 01 '16 at 11:05

7

try this

for div

div {
text-align:justify;
text-justify: inter-word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}

answered Mar 01 '16 at 11:05

venkat

449
4
17

thanks, you saved my bacon. I love how these CSS styles were created without any planning, by pushing it forward with the belly. – Duck Sep 20 '17 at 21:49

score 0 · Answer 6 · answered Aug 18 '17 at 09:35

0

There is also something similar, like display: flex; justify-content: space-around; if you would wrap those texts in spans or divs

answered Aug 18 '17 at 09:35

WoodyDRN

1,221
20
26

score 0 · Answer 7 · answered Dec 27 '18 at 08:36

0

In my case for < p > tag, works with easy way:

p {
  text-align: justify;
  text-justify: inter-word;
}

https://css-tricks.com/almanac/properties/t/text-justify/

answered Dec 27 '18 at 08:36

Navruz Madibragimov

103
2
11

score 0 · Answer 8 · answered May 05 '20 at 21:46

0

To make it look good on Chrome & opera (multiline justify looks bad on them)

I use the following

.fulljustify {
  text-align: justify;
  display: table-row;
  text-align-last: left;
}

answered May 05 '20 at 21:46

Waelmas

1,894
1
9
19

score 0 · Answer 9 · answered Jul 09 '22 at 19:00

0

Chrome solution: If you don't want to mess with the display properties (in my case aligning an anchor tag of a carousel img):

text-align: -webkit-center;

answered Jul 09 '22 at 19:00

kfederer

3
5

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 09 '22 at 21:20

score 0 · Answer 10 · answered Aug 30 '23 at 12:56

0

It worked for me this way:

<div className={s.element}> {text} </div>

.element {
  text-align:justify;
  word-wrap: break-word;
  hyphens: auto;
}

answered Aug 30 '23 at 12:56

Gean Rt

1
1

Vengadesh Balu · Answer 11 · 2018-05-17T11:50:54.723

-4

You better try

style="text-align:justifty;display:inline-block;"

edited May 17 '18 at 11:50

answered May 14 '18 at 13:00

Vengadesh Balu

1
1

score -5 · Answer 12 · edited Jan 26 '13 at 09:38

-5

Just use style="text-align:justify".
It works in all browsers.

edited Jan 26 '13 at 09:38

jenzz

7,239
6
49
69

answered Jan 26 '13 at 09:06

S.K. Dhanda

49
3

4

some kind of explanation would be helpful, won't it? he obiviously used your styles... – Ron Jan 26 '13 at 09:29
@Ron If you want to justify whole paragraph except last row use above trick, and if you want to justify last line also then use ` .justify:after{content: ""; display: inline-block; width: 100%;}` and no need to define height. – S.K. Dhanda Feb 01 '13 at 16:03
he already use the inline css with `text-align: justify` , Please reconsider to give op solution. – Adi Prasetyo Jun 09 '17 at 07:17

text-align justify not working

12 Answers12

Linked

Related