如何通过HTML和CSS实现指定结构下双按钮嵌入多行文本的布局？

完全可以用你指定的HTML结构结合CSS实现这个需求，以下是具体实现代码：

完整代码示例 #

<div class="container">
  <div class="text">This is a long text that is so long that it has to be divided into two lines, and it's truncated with an ellipsis</div>
  <button>button1</button>
  <button>button2</button>
</div>

.container {
  position: relative;
  width: 450px; /* 可根据需求调整容器宽度 */
  line-height: 1.4em; /* 统一行高，确保按钮与第二行文本对齐 */
}

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制文本最多显示两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 90px; /* 左右内边距，留出按钮的位置，宽度根据按钮实际大小调整 */
}

/* 让第一行文本不受padding影响，占满容器宽度 */
.text::first-line {
  padding: 0;
  display: inline-block;
  width: 100%;
}

/* 定位两个按钮到第二行的左右两侧 */
button:nth-of-type(1) {
  position: absolute;
  left: 0;
  top: 1.4em; /* 与行高一致，刚好对齐第二行文本顶部 */
}

button:nth-of-type(2) {
  position: absolute;
  right: 0;
  top: 1.4em;
}

关键逻辑说明 #

1. 多行文本截断：利用WebKit内核的-webkit-line-clamp属性限制文本最多显示2行，超出部分自动显示省略号，兼容绝大多数现代浏览器。
2. 第一行全宽显示：通过::first-line伪元素重置第一行文本的内边距，确保第一行文本占满容器宽度，第二行文本因继承容器内边距，自然处于两个按钮之间。
3. 按钮定位：将按钮绝对定位到容器的左右两侧，top值设置为与行高一致，保证按钮与第二行文本垂直对齐。
4. 短文本适配：当文本内容较短时，只会显示一行，第二行自动留空，按钮会显示在文本下方的左右位置，符合需求。

内容的提问来源于stack exchange，提问作者Henrik Berg