Word wrap a link so it doesn't overflow its parent div width [duplicate]

Answer 1

overflow:hidden seems to be the key to making an element of size:auto break-word correctly

    

      

    
    

Loremipsumdolorsitametconsecteturadipisicingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
    



​

.list {
    border: 1px solid black;
    margin: 50px;
}

.header {
    float:left;
}

.body {
    overflow: hidden;
}

.body p {
    word-wrap: break-word;
}

.header .content {
    background: #DDD;
    width: 80px;
    height: 30px;
}

​

http://jsfiddle.net/9jDxR/

That example includes a left float as I was trying to achieve a media-object like layout.

Unfortunately if you try to use table-cell elements it breaks again :(