alt alt - 5 months ago 10
HTML Question

Thinnest HTML entity that won't break text-alignment

I'm trying to horizontally justify (make equidistant) a number of elements with CSS.

http://jsfiddle.net/thirtydot/EDp8R/

I implemented it and it works fairly well:

.container {
text-align: justify;
}

.box {
display: inline-block;
}

.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}


and

<div class="container"><div class="box">&#32;</div><div class="box">&#32;<div class="box"></div>


However, I noticed that it depends upon each element being separated by space. Basically, I need the elements to be able to squeeze right up next to each other before breaking into a new line, but the space prevents that. If you remove the spaces from the example, the justified content breaks.

Is there an HTML entity that I can place between the elements that will sustain the equidistance?

EDIT: I'm asking specifically because zero-width spaces do not work. A 1px entity would do fine, however, I lack the unicode knowledge on that one.

EDIT: To clarify, I'm looking for a 0px or 1px html entity. Even if it isn't a space (I can hide it).

Answer

CSS Text says

Word-separator characters include the space (U+0020), the no-break space (U+00A0), the Ethiopic word space (U+1361), the Aegean word separators (U+10100,U+10101), the Ugaritic word divider (U+1039F), and the Phoenician Word Separator (U+1091F). If there are no word-separator characters, or if a word-separating character has a zero advance width (such as the zero width space U+200B) then the user agent must not create an additional spacing between words. General punctuation and fixed-width spaces (such as U+3000 and U+2000 through U+200A) are not considered word-separator characters.

So the only possibilities are &#x0020; ( ), &#x00A0; ( ), &#x1361; (), &#x10100; (𐄀), &#x10101; (𐄁), &#x1039F; (𐎟), &#x1091F; (𐤟).

But instead, I recommend flexbox.

#container {
  display: flex;
  justify-content: space-between;
  border: 2px dashed #444;
  height: 125px;
  min-width: 600px;
}
.box1, .box2, .box3, .box4 {
  width: 150px;
  height: 125px;
  flex: none;
}
.box1, .box3 {
  background: #ccc
}
.box2, .box4 {
  background: #0ff
}
<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

Or, for older browsers, you can use an inline element with font-size: 0.

#container {
  text-align: justify;
  text-align-last: justify;
  border: 2px dashed #444;
  height: 125px;
  min-width: 600px;
}
.box1, .box2, .box3, .box4 {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 125px;
}
.box1, .box3 {
  background: #ccc
}
.box2, .box4 {
  background: #0ff
}
#container > span {
  font-size: 0;
}
<div id="container">
  <div class="box1"></div><span> </span>
  <div class="box2"></div><span> </span>
  <div class="box3"></div><span> </span>
  <div class="box4"></div>
</div>

Comments