html - CSS 包装文本和数字之间的差异

Question

下面的 HTML 和 CSS(在 http://jsfiddle.net/zUk63/1/ 的现场演示)呈现以下内容:

如上所示，<dd> 中的文本元素将换行并显示每一行，但是，数字(实际 IP 地址)不会换行但会截断并且不显示第二行。我在当前版本的 IE、FF 和 Chrome 中得到了类似的结果。

是什么原因造成的？如何让数字也换行显示？

HTML

<div class="record-details">
    <dl class="info">
        <dt>Row 1 title with some text:</dt>
        <dd>Some text goes here. Bla bla bla. Bla bla bla</dd>
        <dt>Row 2 title with some numbers:</dt>
        <dd>55.444.33.222,192.168.0.100,192.168.0.102</dd>
        <dt>Row 3 title with some numbers and text:</dt>
        <dd>55.444.33.222,192.168.0.100,192.168.0.102, bla bla bla</dd>
        <dt>Row 4 title with some text and numbers:</dt>
        <dd>bla bla bla,bla bla bla, 55.444.33.222,192.168.0.100,192.168.0.102</dd>
    </dl>
</div>

CSS

.record-details {
    width: 300px;
}
.record-details .info dt, .record-details .info dd {
    overflow-x: hidden;
    overflow-y: hidden;
}
.record-details .info dt {
    float: left;
}

Answer 1

您也可以尝试使用word-wrap:

.record-details {
    width: 300px;
}
.record-details .info dt, .record-details .info dd {
    overflow-x: hidden;
    overflow-y: hidden;
    word-wrap: break-word;
}
.record-details .info dt {
    float: left;
}