dd元素扩展了传递的父元素宽度

Question

这是我的HTML，它从数据库输出数据：

<div class="desc">
    <dl>
        <dt><?php echo $listing['name'] ?> <span class="distance">(3.4 miles)</span></dt>
        <dd><?php echo $listing['address'] ?></dd>
        <dd><?php echo $listing['city'].', '.$listing['state'].' '.$listing['zip'] ?></dd>
        <dd><?php echo $listing['phone'] ?></dd>
        <dd><?php echo $listing['email'] ?></dd>
    </dl>
    <p><a href="#">See on map</a> | <a href="<?php echo $listing['web_link'] ?>" target="_blank">Go to Website</a></p>
</div>

然后是我的CSS：

dt { font-weight: bold; text-transform: uppercase; }
dd { margin-left: 0; }
dl { margin: 0; }
div.desc {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 45%;
    padding: 0 12px;
}

和jsFiddle http://jsfiddle.net/Xk58n/2/

但是，当我在Chrome中查看时，dd扩展了.desc容器的宽度。

Answer 1

添加word-break:break-word; 您的#listings dl CSS的规则：

#listings dl {
    margin: 0;
    word-break:break-word;
}

jsFiddle示例