ie7中的分词答案

【问题标题】：word break in ie7ie7中的分词
【发布时间】：2012-12-30 14:38:40
【问题描述】：

我需要在以下结构中允许分词/自动换行：

<ul>
    <li><strong>Forename</strong><span>forename value</span></li>
    <li><strong>Forename</strong><span>forename value</span></li>
    <li><strong>Forename</strong><span>forename value</span></li>
<ul>

我无法为 span 或 li 固定宽度，因为 li 的数量可能会有所不同。使 li 显示为 table-cell 有助于对跨度内容进行分词，如图所示。

有没有办法让 IE7 表现/理解表格单元格？

编辑：

我最初的问题是我正在尝试实现如下图所示的显示，但是如果将长的完整字符串作为输入而不是破坏单词，则内容会在右侧被剪切。

我想知道为什么 word-break:break-all 除非将 span 设为 block 或 inline-block 时才会生效？
即使将span做成inline-block，接下来的问题是如何让后续内容在continuos线上流动？

附图：http://i.stack.imgur.com/1gB92.png

有什么想法吗？

【问题讨论】：

看看这里ie7-and-the-css-table-cell-property。 @andy magoon 的 jQuery 有一个很好的解决方案
这看起来不像是一个断字问题；相反，它是关于将列表样式化为表格。有什么不使用table 元素的实际理由吗？

标签： css internet-explorer-7 css-tables

【解决方案1】：

你可以试试我的演示in JSBin

您可以检查每个span css 的white-space 属性，以确保white-space 的值是normal，而不是nowrap - 这可以防止换行；

【讨论】：

感谢您的回答。但这不是我要找的显示器。表格单元格在 IE7 中也不起作用。还是谢谢。

【解决方案2】：

您的意思是您拥有的三个文本块中的每一个都可能不超过 3 行文本？如果是这样：

<li style="height:100%;">
    <div style="width:100%;height:100%;overflow:hidden;">
         <strong>Forename</strong>
         <span>forename value</span>
    </div>
</li>

这样，可能存在的第四行文本将不可见。

我不再支持 IE7，因为要让网站与它兼容需要很长时间，而且我在一些统计数据中看到 IE7 的使用率约为 5%。

如果访问者正在使用 ie7，我只会弹出一个窗口，并显示他们使用的浏览器自 2008 年底以来不再更新，这使他们容易受到攻击。并建议他们更新到较新的版本。如果我们都这样做，我们很快就会摆脱 IE7。

【讨论】：

我最初的问题本身就是不要把内容剪掉或者让它隐藏起来。