CODEWITHSUNDEEP
htmlcss-floatcss
Dan Abramov
Dan Abramov

Reputation: 268265

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)?

Upvotes: 24

Views: 29751

Answers (4)

Frank Tan
Frank Tan

Reputation: 4412

There is a very nice flexbox solution if you have the browser support:

/* flexbox additions */

ul li {
  display: flex;
}

.buttons {
  flex-shrink: 0;
}

.owners {
  flex-shrink: 0;
  margin-right: 6px;
}

/* original CSS (inline-block is technically no longer necessary) */

.buttons {
  display: inline-block;
}

.owners {
  display: inline-block;
}

.text {
  display: inline-block;
}

/* the rest is visual styling */

ul li {
  line-height: 1.5em;
  padding: 12px 8px 12px 8px;
  margin-bottom: 12px;
  margin-top: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 15px;
  background-color: #DBEAFF;
  min-height: 23px;
}

.buttons {
  min-width: 13px;
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: -3px;
}

.buttons a {
  padding: 13px 9px 5px 9px;
}
<ul>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a>
    </div>
    <div class="text">short text
    </div>
  </li>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a>
    </div>
    <div class="text">longer text longer text longer text longer text longer text longer text longer text longer text longer text
    </div>
  </li>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a> и <a>Саша Васильев</a>
    </div>
    <div class="text">
      longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text
      longer text longer text longer text longer text longer text longer text
    </div>
  </li>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a> и <a>Саша Васильев</a>
    </div>
    <div class="text">
      трали-вали трали-вали трали-вали трали-вали
    </div>
  </li>
</ul>

Upvotes: 3

maxisam
maxisam

Reputation: 22735

I think you need to set max-width with different display mode.

li {overflow:hidden;}
li div { float:left; }
.button{ max-width: 10%;}
.owners{ max-width: 20%;}
.text{ max-width: 70%;}

See the new result here

BTW, if you use inline-block, the owners part won't stay on top.

I modified the code to fit your requirement. :)

FYI, li {overflow:hidden;} is a way to make a container to encompass its floated children.

Upvotes: 2

thirtydot
thirtydot

Reputation: 228222

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

Upvotes: 22

MatTheCat
MatTheCat

Reputation: 18751

You have to specify some max-width with percentage:

<li>
    <div class="buttons" style="max-width:10%;">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners" style="max-width:30%;">
        Даня Абрамов и Саша Васильев
    </div>
    <div class="text" style="max-width:60%;">
        трали-вали трали-вали трали-вали трали-вали
    </div>
</li>
<!-- 10+30+60 = 100% -->

Upvotes: 4

Related Questions