Dan Abramov Dan Abramov - 1 year ago 92
HTML Question

How to wrap lines in an inline-block with CSS?

I have a simple HTML structure (jsfiddle):

<div class="buttons">
<a href="done"><img src="done.png"></a>
<div class="owners">
Даня Абрамов и Саша Васильев
<div class="text">
трали-вали трали-вали трали-вали трали-вали

display: inline-block

This looks fine when
is fairly small:

enter image description here

However, as the text grows,
elements extend and eventually fall over the line:

enter image description here

This is ugly, and I would like to avoid that.

What I want to achieve instead is this:

enter image description here

When the text is too large to fit inside the element, I want it to be wrapped by lines.

I tried setting
float: left
on the elements, but couldn't get it working.

What's the proper way to do this with HTML and CSS (no tables)?

Answer Source

The exact result you desire can be achieved if you use floats instead of display: inline-block.

See: http://jsfiddle.net/thirtydot/CatuS/

li {
    overflow: hidden;
.buttons, .owners {
    float: left;
.text {
    overflow: hidden;
    padding-left: 4px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download