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

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,但它并不是非常复杂,所以它应该很容易在心理上翻译) .

我从/sf/answers/110417821/阅读,学习并使用了它,虽然它让我更接近我的预期解决方案,但它并不能满足我的所有需求.

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

我会尝试,dt { display: run-in; }但这在Firefox中不起作用,它仍然没有导致我现在的任何差异(当dd { word-wrap: break-word }包括在内,dd开始在下一行,然后包装,就像它现在一样) .

编辑:经过一番搜索后,我找到了这个答案: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答案).

Answer 1

根据CSS3 Text草案,您可以使用word-break: break-all(在dd元素上).这些名字是用词不当; 设置声明的任何字符串的内容可以在任何时候被打破.(这与之形成对比word-wrap: break-word,同样允许"自由"换行,但仅在绝对需要时才能避免溢出,即紧急中断.)

但是,它仅受Firefox和IE支持.为了获得更好的浏览器覆盖率,您需要<wbr>在每个数字后插入例如零宽度空格或标签(但您可以使用客户端脚本执行此操作); 两种选择都有利有弊.