text-align justify not working
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! a开发者_JS百科ny idea why?
thanks for any help.
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>
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.
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 ;)
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/
try this
for div
div {
text-align:justify;
text-justify: inter-word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}
There is also something similar, like display: flex; justify-content: space-around; if you would wrap those texts in spans or divs
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/
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;
}
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;
You better try
style="text-align:justifty;display:inline-block;"
Just use style="text-align:justify"
.
It works in all browsers.
精彩评论