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.

Answer 1

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>

Answer 2

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.

Answer 3

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;)

Answer 4

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/

Answer 5

try this

for div

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

Answer 6

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

Answer 7

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/

Answer 8

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;
}

Answer 9

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;

Answer 10

You better try

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

Answer 11

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