3

我正在使用要求以下代码的规范：

<dl>
    <dt>Key</dt>
    <dd>012345678901234567890123456789</dd>
</dl>

...像这样渲染：

Key  01234567890123456
7890123456789

当 DD 的内容包含空格时，它可以正常工作，但是当没有空格时，它会失败。即使包括dd { word-wrap: break-word; }也不太有效，并导致以下结果：

Key
0123456789012345678901
23456789

我当前的 CSS 如下所示：

dl {
    margin: 1em 0;
    padding: 0;
    width: 250px;
}

dt {
    float: left;
    clear: left;
    margin: 0;
    padding: 0 .5em 0 0;
    font-weight: bold;
}

dd {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

dd:after {
    content: ".";
    visibility: hidden;
    clear: left;
}

如何仅使用 HTML 和 CSS 来达到我想要的效果？

我在这里也有一个演示，试图澄清我的需求：http ://cdpn.io/Ezujp （警告，包含 SCSS 而不是 CSS，但它并不是非常复杂，所以应该很容易理解） .

我阅读、学习并使用了https://stackoverflow.com/a/1577397/771948，虽然它让我更接近我的预期解决方案，但它并不能满足我的所有需求。

我不需要使用 DL。如果有另一种方法可以跨浏览器（IE7+）的方式实现我的预期效果，那么我愿意使用它，只要它在语义上是正确的并且不涉及太多的黑客攻击。

我会尝试dt { display: run-in; }，但这在 Firefox 中不起作用，并且它仍然没有导致我现在所拥有的任何差异（dd { word-wrap: break-word }包含时， dd 从下一行开始，然后包装，就像现在一样） .

编辑：在围绕 SO 进行更多搜索后，我找到了这个答案：https ://stackoverflow.com/a/3284425/771948

它提供了一些比 DL 更容易设计样式的替代选项，但我不确定语义。尽管如此，我使用 ul 以下列方式构建了一个工作原型：

<ul>
    <li><strong>Key</strong>012345678901234567890123456789</li>
</ul>

...其中，当样式如下：

ul {
    outline: 1px solid #F00;
    margin: 1em 0;
    padding: 0;
    width: 250px;
}

li {
    width: 100%;
    outline: 1px solid #00F;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

strong {
    white-space: nowrap;
}

...按预期呈现，但我不确定这在语义上是否正确，也不确定屏幕阅读器是否可访问。在这种情况下，有人对我有什么有用的建议吗？

先感谢您。如果不出意外，我希望这对处于类似情况的其他人来说是一个有用的资源（因为链接到其他两个类似问题的 SO 答案）。

4

1 回答 1

7

根据 CSS3 文本草案，您可以使用word-break: break-all（在dd元素上）。名称用词不当；设置声明内容中的任何字符串都可能在任何时候被破坏。（这与 形成对比word-wrap: break-word，它同样允许“自由”换行，但仅在绝对需要避免溢出时，即作为紧急中断。）

但是，它仅受 Firefox 和 IE 支持。为了更好地覆盖浏览器，您需要<wbr>在每个数字后插入例如零宽度空格或标签（但您可以使用客户端脚本来执行此操作）；这两种选择都有优点和缺点。

于 2013-03-04T19:00:29.777 回答