多行跨度就像一个块？

我有一个问题，在一个div中设置两个跨度。我需要确保第二次跨度与第一次跨度相同。我能够让它在Chrome浏览器：多行跨度就像一个块？

enter image description here

但这里是我得到了IE：

enter image description here

这里是我的代码：

<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中工作？提前致谢。

来源

2015-07-02 Shalom Aleichem

阻止Firefox的功能。 –

添加显示：块;在'.other'类 – Stanimir

你可以尝试包括'reset.css'（谷歌它）。它消除了浏览器之间的许多差异。 –

这看起来像一个错误。按照spec：

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

内联元素的软包装基于其块元素祖先的宽度。通常，这发生在有空间或某些标点符号的地方。（添加一个感叹号或问号随机在WS，这将打破。）

的word-break: line-breakspec指出，软包装可以在两个字母之间发生，而这种属性适用于“所有元素。”但是，它似乎只适用于IE中的块级元素。

您可以通过移动word-break到容器解决这个特定的问题：

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

Fiddle

来源

2015-07-02 21:52:13

确实，我不知道它为什么它的作品:) –

请参阅我的答案下面的解释。 –

似乎并不是一个错误恕我直言，因为Firefox与IE有相同的行为。 Chrome在这里是个例外， – dippas

这是通过浏览器之间如何实现自动换行的差异引起的。具有讽刺意味的是，在这种情况下IE正在做正确的事情。

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

如果要抑制单词换行，请将两个跨度放在一个nowrap元素中，但这会导致跨度在容器宽度不足时溢出其容器。

来源

2015-07-02 21:58:36

你能解释为什么IE正确地做到这一点吗？由于跨度如果有空格就会缠绕，所以我认为它应该用'word-break：break-all;'换行。 –

只有当容器设置了绝对宽度时，分离才有效。即使如此，一些浏览器也宁愿在一个空间而不是两个字母之间打破。 –

根据规范，这种风格适用于所有元素。您不能在内联元素上设置宽度，但它们具有隐式宽度，允许在空格处使用软包装，因此应该在使用“break-all”时允许字母间的软包装。 –

多行跨度就像一个块？

回答

相关问题