Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two identical divs except for spacing & indentation-- why do they display differently?

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;
}
like image 777
Evan Hobbs Avatar asked Mar 23 '23 03:03

Evan Hobbs


1 Answers

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.

like image 191
Gabriele Petrioli Avatar answered May 02 '23 04:05

Gabriele Petrioli