多行跨度是否像块一样呈现？

Question

我在一个div中样式两个元素遇到问题。我需要确保第二个元素与第一个元素在同一行上。我已经成功在Chrome浏览器中实现了这个效果：

但这是我在IE中得到的：

这是我的代码：

<div class="container">
  <span>7/2/2015</span>
  <span class="other">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>
</div>

.container {
    width: 200px;
}

.other {
    word-break: break-all;
}

http://jsfiddle.net/alexarg/7q92t9m0/

有没有办法让它至少在IE 10中工作？提前致谢。

- Shalom Aleichem

---

在Firefox中也封锁功能。 - m4n0

在.other类上添加display: block;。 - Stanimir Dimitrov

你可以尝试包含 reset.css（谷歌一下）。它能消除许多浏览器之间的差异。 - Steve Wellens

@Stanimir 在 .other 中添加 display: block 会使其换行，但不会将其放在同一行。这是 jsfiddle 的链接：http://jsfiddle.net/7q92t9m0/24/ - Shalom Aleichem

Answer 1

这似乎是一个bug。根据规范：

此属性指定字母之间的软换行机会，即在哪里“正常”和允许断开文本行。

内联元素的软换行基于其块元素祖先的宽度。通常情况下，在有空格或某些标点符号的地方会发生这种情况。（在W中随机添加感叹号或问号，它将被打断。） word-break: line-break规范指出，软换行可以发生在两个字母之间，并且此属性适用于“所有元素”。然而，在IE中，它似乎只适用于块级元素。

您可以通过将word-break移动到容器来解决此特定问题。

.container {
  word-break: break-all;
}

Fiddle

- Rick Hitchcock

---

请看下面我的回答，其中有解释。 - Robert Lee

在我看来，这似乎不是一个错误，因为Firefox的行为与IE相同。Chrome在这里是个例外。 - dippas

Opera和Chrome的工作方式相同，而且规范似乎并不含糊。 - Rick Hitchcock

Answer 2

这是由于浏览器实现换行的方式不同而引起的。具有讽刺意味的是，在这种情况下，IE 的做法是正确的。

如果容器足够宽，或者您的第二个 span 中有空格，它就会在所有地方表现相同。

如果您想禁止换行，请将两个 spans 放入一个nowrap元素中，但这将导致spans在其容器不够宽时溢出。

- Robert Lee

---

你能解释一下为什么IE可以正确地执行这个吗？由于如果有空格，span将会换行，我认为应该使用word-break: break-all;来换行。 - Rick Hitchcock

只有在容器设置了绝对宽度时，break-all 才能起作用。即使如此，一些浏览器仍然更喜欢在空格而不是两个字母之间断开。 - Robert Lee

根据规范，此样式适用于所有元素。您无法在内联元素上设置宽度，但它们具有隐式宽度，允许在空格处进行软换行，并且因此应该在使用 break-all 时允许字母之间的软换行。 - Rick Hitchcock