IE7中的块元素文本溢出问题答案

【问题标题】：Block element text overflow problem in IE7IE7中的块元素文本溢出问题
【发布时间】：2010-05-03 17:01:06
【问题描述】：

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

这是它在 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 这样做的任何 cmets？如何使这些跨度扩展以适合 IE7 中的一行中的整个文本，而不是换行或溢出？

【问题讨论】：

标签： html css internet-explorer-7

【解决方案1】：

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

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

【讨论】：

谢谢，这就是我们所需要的。效果很好！

【解决方案2】：

你有问题。浮动和自动宽度只是不混合。当涉及到比宽度更宽的东西时，您也会遇到问题。

为什么不让它内联呢？如果您需要一个盒子，请添加填充：

span.object { padding: 6px; }

编辑：如果您不希望它们跨行添加：

span.object { white-space: nowrap; }

比让花车完成这项特定任务要容易得多。

【讨论】：

实际上不适用于多行。改为内联并移除浮动。结果：.objects 现在分成多行，这违背了将它们视为单个元素的想法。随机较长的元素和靠近 div 边缘的元素会出现可怕的溢出。
@Adomas：添加 white-space: nowrap 以避免换行。
span 必须有几行，但 span 内的文本必须适合一行，并且不能在任何点中断。 Nowrap 规则使所有跨度都适合一行溢出父 div。请注意，其他所有现代浏览器都没有问题，只有 IE7（尚未测试 IE6）。