Как во float поправить обтекание?

Question

Как можно настроить обтекание во float, чтобы не было такого заполнения по одному слову ?
А было, допустим, только на 1-2 строки

.parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
}
.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px
}
.parent p {
  text-align: justify
}

<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

<p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

Answer 1

Ну допустим вот так можно. Но ведь так вас не устроит, верно? Места нет, чтобы перенос первого слога Lor сработал с hyphens: auto.

.parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
}

.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px
}

.parent p {
  text-align: justify;
  word-break: break-all;
}

<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

Еще можно простенький типограф написать на js, который меняет пробел после коротких слов на неразрывный пробел.

UPD: Пришла в голову еще одна идея:

.parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
  letter-spacing: -.05em;
}

.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px;
}

.parent p {
  text-align: justify;
  hyphens: auto;
}

<html lang="en">
<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

UPD2: Меня уже не остановить, еще мысль. )))

.parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
  font-stretch: condensed;
  font-family: sans-serif;
}

.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px
}

.parent p {
  text-align: justify;
  hyphens: auto;
}

<html lang="en">
<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

Answer 2

Не совсем конечно понятен вопрос. Тех же флоатов сколько может быть, насколько длинными могут быть слова, и по одному или не только, родительский блок каким может быть в размере, короче вопросов много. Может быть вариант следующий. Флоаты взять в отдельный блок, ну и по коду дальше, думаю, разберетесь. Смотрите:

* {
  margin: 0;
  padding: 0;
}

.parent__float {
  display: block;
  width: 250px;
  padding: 3px;
  border: 1px solid gray;
}

.parent {
  float: left;
  overflow: hidden;
  max-width: 130px;
  margin-right: 5px;
}

.parent div {
  display: inline-block;
  float: left;
  background-color: gray;
  margin: 5px;
  padding: 5px;
}

.parent p {
  margin: 2px;
  padding: 0;
  line-height: 1.5;
  text-align: justify;
}

<div class="parent__float">
  <div class="parent">
    <div>Lorem</div>
    <div>consectetur</div>
    <div>velu</div>
    <div>Blanditiis</div>
    <div>nulla</div>
    <div>am</div>
  </div>
  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

Answer 3

правило для флоатов если дети плывут - родители отвечают за это. например:

.parent{ clear:both; display:table; } .parent div{ float:left; }

БЛОГ НА HUSL

Как во float поправить обтекание?

Ответы (3 шт):