html - 不会破坏文本对齐的最薄的 HTML 实体

Question

我正在尝试使用 CSS 水平对齐(等距)多个元素。

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

我实现了它并且运行良好:

.container {
    text-align: justify;
}

.box {
    display: inline-block;
}

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

和

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

但是，我注意到它取决于每个元素被空格分隔。基本上，我需要元素能够在进入新行之前紧挨着彼此挤压，但空间阻止了这一点。如果您从示例中删除空格，对齐的内容就会中断。

是否可以在元素之间放置一个 HTML 实体来维持等距离？

编辑:我特地询问是因为零宽度空格不起作用。一个 1px 的实体就可以了，但是，我缺乏关于那个的 unicode 知识。

编辑:澄清一下，我正在寻找 0px 或 1px html 实体。即使它不是空格(我可以隐藏它)。

Answer 1

CSS Text说

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.

所以唯一的可能性是 ( ),   ( ), ፡ (፡), 𐄀 (𐄀), 𐄁 ; (𐄁), 𐎟 (𐎟), 𐤟 ( 𐤟).

但相反，我推荐 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>

或者，对于旧版浏览器，您可以使用 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>