html - 当前一个 div 文本溢出时，内联 div 行的第二个 div 从下一行开始而不是在前一个 div 之后

Question

当前面的 div 中的文本溢出时，如何防止后面的内联 div 换行显示。

如您所见，对于第一个帖子，主要内容换行到第二行，因此它后面的链接显示在新行上(这是不正确的)。

但是对于第 3 篇文章，主标题足够短，只能在一行上，并且链接正确显示在标题后面。

如何防止链接显示在新行的第一种情况？

Answer 1

对这两个元素使用 display: inline;，而不是 display: inline-block;(你可能需要一个包装器 div 然后).如果内联 block 的内容至少有一行长，则内联 block 将具有容器的整个宽度。

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