I\'m trying to justify the text within this p tag so that it perfectly fits the width of the p.
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.
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>
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;
}
There is also something similar, like display: flex; justify-content: space-around; if you would wrap those texts in spans or divs
You better try
style="text-align:justifty;display:inline-block;"
Just use style="text-align:justify"
.
It works in all browsers.