2-й div строки встроенных div, начинающийся со следующей строки, а не позади предыдущего div, когда предыдущий текст div переполняется

Question

Как предотвратить отображение следующего встроенного div на новой строке при переполнении текста внутри предыдущего div.

Как видно, для первого сообщения основное содержимое переносится на второестрока, и поэтому ссылка, следующая за ней, показывается в новой строке (что неверно).

Но для 3-го поста основной заголовок достаточно короткий, чтобы быть только в одной строке, и там ссылкаправильно отображается после заголовка.

Как предотвратить первый случай, когда ссылка отображается в новой строке?

Answer 1

Используйте display: inline;, а не display: inline-block; для обоих элементов (тогда вам, вероятно, понадобится оболочка div).Inline-блоки будут иметь полную ширину контейнера, если их содержимое имеет длину не менее одной строки.

.wrap {
  border: 1px solid #aaa;
  padding: 20px;
}

.first {
  display: inline-block;
}

.second {
  display: inline;
}

<div class="wrap">
  <div class="first"><strong>inline-block</strong> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula eget dolor. </div>
  <div class="first" style="color : green;">Here another element.</div>
</div>

<div class="wrap">
  <div class="second"><strong>inline</strong> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula eget dolor. </div>
  <div class="second" style="color : green;">Here another element.</div>
</div>