html - IE7中 block 元素文字溢出问题

Question

我正在使用 jQuery、HTML 和 CSS 制作一个“排序元素”网络游戏。虽然在 FF、IE8、Opera、Chrome 中一切正常，但我在 IE7 将单词包装在 block 元素内时遇到问题。

这是它在 IE7 中的样子(错误): Link (cannot post images as a new user)

在 IE8 中，带有换行文本的框会展开以将其整个放在一行中，而不会出现任何溢出。 抱歉，不能以新用户身份提供其他链接

不要介意元素顺序，因为它是随机的。元素由 jQuery 动态生成。

HTML代码:

<div class="ui-sortable" id="area">
  <span class="object">: </span>
  <span class="object">1998- </span>
  <span class="object">ISSN 1392-4087</span>
  <span class="object">, </span>
  <span class="object">. </span>
  <span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">Vilnius</span>
  <span class="object">1998- </span>
  <span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>

CSS 代码(删除了字体和颜色等无关信息):

#area {
  min-height: 160px;
  width: 760px;
}
.object {
  display: block;
  float: left;
  text-align: center;
  width: auto;
}

关于 IE7 为何这样做的任何评论？在 IE7 中如何使这些跨度扩展以将整个文本放在一行中而不换行或溢出？

Answer 1

我自己在 IE7 中尝试过，当您将 'white-space: nowrap' 添加到 span.object 时，它应该可以解决问题。 float block 元素工作得很好，所以不要改变它。

测试结果见图片:http://xs.to/image-B3F6_4BDE909D.jpg