css - 带省略号和换行的多行截断

Question

我想实现以下设计，其中文本环绕标题并在第二行后通过省略号截断。

---

我可以使用 Flexbox 和行夹紧来实现截断，但无法将文本环绕标题。

下面的片段:

#container {
  max-width: 500px;
  display: flex;
}
#header {
  background-color: lightgreen;
}
#text {
  background-color: lightblue;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div id="container">
  <span id="header">Ad</span>
  <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

---

我尝试使用 float ，但是使用 display: -webkit-box; 使文本表现得像 block 元素，并且不会环绕标题。

下面的片段:

#container {
  max-width: 500px;
}
#header {
  background-color: lightgreen;
  
  float: left;
}
#text {
  background-color: lightblue;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div id="container">
  <span id="header">Ad</span>
  <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

---

有关如何截断文本并环绕标题的任何指示？谢谢。

Answer 1

您是否尝试过将行钳位移至父项并让子项内联？

#container {
  max-width: 500px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
}

#header {
  background-color: lightgreen;
}

#text {
  background-color: lightblue;
}

<div id="container">
  <span id="header">Ad</span>
  <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>