Dan Abramov Dan Abramov - 4 months ago 13
HTML Question

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

I have a simple HTML structure (jsfiddle):

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


buttons
,
owners
and
text
have
display: inline-block
.

This looks fine when
text
is fairly small:

enter image description here

However, as the text grows,
inline-block
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

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;
}