自动换行不适用于chrome中的div内部div

Question

在linux chrome 27.0.1453.93和windows chrome 27.0.1453.94中尝试过。 http://jsfiddle.net/SruNd/4/上的示例。

CSS

.main {
    width : 100px;
    border : 1px solid #000;
    word-wrap: break-word;
}

HTML

<div class='main'>
    <fieldset>
        <div>
            http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg
        </div>
    </fieldset>
</div>

我也试过这个，其中word-wrap属性直接应用于内部div，而fieldset是一个块元素。

在我看来，就像一个chrome bug，因为我也在FireFox中尝试过它，并且它应该在斜线上进行包装，如果没有fieldset，它也会在Chrome中正确执行此操作。

我尝试提交Chrome错误报告，但由于HTTP请求格式错误，页面暂时不接受我的提交。

如果有人有任何见解，请帮忙。谢谢。

Answer 1

在fieldset标记上使用：

fieldset
{
    min-width: auto;
}

实际上，这是由于chrome的字段集默认属性：

min-width: -webkit-min-content;

Answer 2

您需要为div设置min-width和max-width。例如：

JSFiddle

Answer 3

HTML代码

<div class='main'>
<fieldset>
    <div class="content">
        http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg
    </div>
</fieldset>
</div>

Css代码

.content{
width : 100%;
border : 1px solid #000;
word-wrap: break-word; 
}