多线跨度表现得像一个块？

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中运行？提前谢谢。

Answer 1

这似乎是一个错误。根据{{​​3}}：

  

此属性指定字母之间的软包装机会，即   它是“正常”的，允许打破文本行。

内联元素的软包装基于其块元素祖先的宽度。通常，这发生在有空格或某些标点符号的地方。 （在Ws中随机添加感叹号或问号，它会中断。）

word-break spec表示软包装可能发生在两个字母之间，并且此属性适用于＆＃34;所有元素。＆＃34;但是，它似乎仅适用于IE中的块级元素。

您可以通过将.container { word-break: break-all; } 移至容器来解决此特定问题：

{{1}}

spec

Answer 2

这是由于浏览器实现自动换行的方式之间的差异造成的。具有讽刺意味的是，在这种情况下，IE正在做正确的事。

如果容器足够宽或者第二个跨度中有空格，它在任何地方都会表现相同。

如果你想要压缩自动换行，请将两个跨度放在一个nowrap元素中，但是当它们的容器不够宽时，这将导致跨度溢出它们的容器。