Word-wrap does not apply to divs inside a set of fields in chrome

Question

I tried on linux chrome 27.0.1453.93 and windows chrome 27.0.1453.94. Example 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 also tried this when 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 error, since I also tried this in FireFox, and it wraps the same way as on slashes, and without a set of fields it also does it correctly in Chrome.

I tried to submit a chrome error report, but the page is not accepting my application right now due to an error in the HTTP request.

If anyone has an understanding, please help. Thanks.

Answer 1

Use this in the fieldset tag:

 fieldset { min-width: auto; } 

This is actually due to the default value of the chrome property for a set of fields:

 min-width: -webkit-min-content; 

Answer 2

You need to set min-width and a max-width to div. Example:

Jsfiddle

Answer 3

HTML code

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

Css code

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