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

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;会使文本的行为像一个块元素，并且不会环绕标题。

以下代码段：

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