I'm trying to use text-align:justify
to space divs equally in another div. For some reason it works if the html is indented but not otherwise. Unfortunately the application I'm working on often makes all the html run together in a big string so I need to figure out how.
Here is a link to a code pen with both problems: http://www.codepen.io/evanhobbs/pen/LDgJc
And here is the code:
1- Identical to number 2 but with the all the spacing/indentation
<div class="equal-justify-wrapper">
<div>one</div>
<div>two</div>
<div>three</div>
<span class="equal-justify-stretcher"></span>
</div>
2-. Identical to number 1 but with the all the spacing/indentation removed
<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>
CSS
.equal-justify-wrapper {
list-style: none;
background-color:red;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.equal-justify-wrapper > div {
width: auto;
//height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background: #000;
color: yellow;
}
.equal-justify-stretcher {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
That is because when there is no whitespace between them they are considered a single word.(imagine a long word where you had inserted tags to colorize some letters. you would not want to have the word split there.)
In the first case the whitespace (enter/tab) acts as a word boundary.
You need to introduce some white space between the tags for properties like text-align: justify;
on the parent to take effect.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With