html - 将 div 放置在文本的右侧

Question

我有一个固定宽度的 div。它有两个 child :

1. 第一个包含文本，
2. 第二个类似于“徽章”(只是一个宽度和高度固定的 div)。

所以我想实现这样的目标:-

我希望第二个 child 紧挨着第一个 child 的文本

我试图通过向父级添加 display: flex 来解决这个问题，但问题是第一个子级占用的宽度超过其内容(下面代码段中的示例)

我尝试将 flex-basis: 0 添加到第一个 child ，但是每个单词都以新行开头，即使有足够的地方在一行中显示整个文本.

也许还有其他解决方案？我尝试使用绝对定位的 child 来解决这个问题，但也失败了。

.parent {
  width: 150px;
  background: lightblue;
  display: flex;
  align-items: center;
}

.first-child {
  outline: 1px solid red;
}

.first-child span {
  outline: 1px solid white;
}


.second-child {
  outline: 1px solid blue;
  width: 20px;
  height: 10px;
  flex-shrink: 0;
}

<div class="parent">
  <div class="first-child">
    <span>Loooooooong teeeeeext</span>
  </div>
  <div class="second-child">
  </div>
</div>
<br /><br />
<div class="parent">
  <div class="first-child">
    <span>Short text</span>
  </div>
  <div class="second-child">
  </div>
</div>

Answer 1

您只能将 width 用作文本元素的 min-content;。

例如:

width: min-content;