Question

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

<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读取，学习并使用https://stackoverflow.com/a/3284425/771948，虽然它让我更接近我的预期解决方案，但它并不能满足我的所有需求。

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

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

编辑：在搜索了一下之后，我找到了这个答案：{{3}}

它提供了一些比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答案）。

Answer 1

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

但是，它仅受Firefox和IE支持。为了获得更好的浏览器覆盖率，您需要插入例如每个数字后面的零宽度空格或{{1}}标记（但您可以使用客户端脚本执行此操作）;两个选项都有pros and cons。

当DD内容没有空格时，如何在DT下制作DD包裹

1 个答案: