Prevent inline block from wrapping but allow content to wrap

Try white-space: normal on the li elements.

white-space is inherited by default so they received nowrap from the ul.

I'm starting to think that you are using an ul for layout purposes which div might be better suited for:

<div class="Item">
 <div class="ImageContainer"><img src="" alt="/></div>
 <div class="TextContainer">Text text text text text</div>
</div>

.Item {
 width: 200px;
 overflow: auto;
}

.ImageContainer {
 float: left;
 width: 40%;
}

.TextContainer {
 float: left;
 width: 60%;
}

li {display:table;}

is your friend. Also, don't forget to remove inline-styles!