2 行文字。第一行最多可以有 2 行。底部需要始终位于第二行，包裹在第一行之后。请仅使用 CSS 解决方案

Question

我有这个 HTML

<div class="link">
   <i class="icon" />
   <div class="text-wrapper">
       <span class="label">Some label which can span at most 2 lines</span>
       <span class="subtext">(optional)</span>
   </div>
</div>

一种显示方式是：

请注意标签如何换行到第二行，而潜台词则在其后面。

---

另一种显示方式是：

注意这里的标签不够长，无法换行，但潜台词仍然在第二行。

谁能建议我如何仅使用 HTML/CSS 实现上述目标？随意忽略解决方案中的图标。我已经有了。提前致谢。

我到目前为止的代码......

.link {
  position: relative;
  font-size: 0.875rem;
  padding-left: 26px;
  text-align: left;
  line-height: 1.25rem;
}
.icon {
  padding: 0;
  width: 18px;
  height: 18px;
  font-size: 18px;
  border-radius: 50%;
  transform: translateY(2px);
  position: absolute;
  top: 0;
  left: 0;
}

.label { 
  margin-right: 4px; 
  color: #007dbb; 
}
.subtext { color: #686868; }

Answer 1

而不是有两个单独的spanfortitle和subtitle。您可以为标题指定一个父级，并subtitle在其中添加跨度。

.link {
    display: flex;
    flex-direction: row;
}
.link i {
    margin-right: 10px;
}
.text-wrapper {
    display: flex;
    width: 175px;
}
.text-wrapper p {
    margin-top: 0;
}

.text-wrapper .subtitle {
    color: blue;
    font-style: italic;
}

<div class="link">
    <i class="icon">Icon</i>
    <div class="text-wrapper">
        <p class="title">Some label which can span at most 2 lines
          <span class="subtitle">(optional)</span>
        </p>
    </div>
 </div>