css - ie7中的分词

Question

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

<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>

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

• 有没有办法让 IE7 表现/理解 table-cell ？

编辑 ：

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

1. 我想知道为什么word-break:break-all不会生效，除非将 span 设为 block 或 inline-block ？

2. 即使将 span 设置为 inline-block，下一个问题是如何使后续内容在连续线上流动？

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

请问有什么想法吗？

Answer 1

你可以试试我在 JSBin 中的演示

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

Answer 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。