Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Word-wrap doesn't apply to div inside fieldset in chrome

Tried in linux chrome 27.0.1453.93 and windows chrome 27.0.1453.94. Example at 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>

I've also tried this where the word-wrap property is applied directly to the inner div and the fieldset is a block element.

It seems to me like a chrome bug as I've also tried this in FireFox and it wraps as it should on the slashes, and without the fieldset it also does this correctly in Chrome.

I tried to submit a chrome bug report however the page is not accepting my submission right now due to a malformed HTTP request error.

If someone has any insight please help. Thank you.

like image 420
JSous Avatar asked Jun 05 '13 14:06

JSous


Video Answer


1 Answers

Use this on fieldset tag:

fieldset
{
    min-width: auto;
}

In fact, this is due to the chrome's default property for fieldset :

min-width: -webkit-min-content;
like image 120
Mansur Khan Avatar answered Nov 14 '22 22:11

Mansur Khan