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

对dd元素使用css的分词和空格属性。

.record-details .info dt, .record-details .info dd {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: pre-line;
    word-break: break-all;
}

你也可以看一下css的自动换行属性。

小提琴：http://jsfiddle.net/zUk63/2/

Answer 2

您也可以尝试使用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;
}

Answer 3

将word-wrap:break-word属性添加到

.record-details .info dt, .record-details .info dd{
    overflow-x: hidden;
    overflow-y: hidden;
    word-wrap: break-word;
}