Как обернуть строки в встроенный блок с помощью CSS?

У меня есть простая структура HTML (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 и text имеют display: inline-block.

Это выглядит отлично, когда text довольно мало:

enter image description here

Однако по мере роста текста элементы inline-block расширяются и, в конце концов, падают над линией:

enter image description here

Это уродливо, и я бы хотел этого избежать.
Вместо этого я хочу:

enter image description here

Когда текст слишком велик, чтобы поместиться внутри элемента, я хочу, чтобы он был обернут линиями.
Я попытался установить float: left на элементы, но не смог заставить его работать.

Каков правильный способ сделать это с помощью HTML и CSS (нет таблиц)?

ОТВЕТЫ

Ответ 1

Точный результат, который вы желаете, может быть достигнут, если вы используете float вместо display: inline-block.

Смотрите: http://jsfiddle.net/thirtydot/CatuS/

li {
    overflow: hidden;
}
.buttons, .owners {
    float: left;
}
.text {
    overflow: hidden;
    padding-left: 4px;
}

Ответ 2

Вы должны указать некоторые max-width с процентом:

<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% -->

Ответ 3

Я думаю, вам нужно установить максимальную ширину с другим режимом отображения.

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

Посмотрите новый результат здесь

Кстати, если вы используете встроенный блок, часть владельцев не останется на вершине.

Я изменил код в соответствии с вашими требованиями.:)

FYI, li {overflow:hidden;} - способ создания контейнера для размещения его плавающих дочерних элементов.

Ответ 4

Существует очень приятное решение flexbox, если у вас есть поддержка браузера:

/* 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>