第二行省略号，阅读右侧更多内容

Question

我尝试用省略号制作两行内容，并将“阅读更多”链接放在省略号后面，但它适用于单行，我尝试了两行

我的代码风格

.maincontent {
  display: flex;
}

.firstpart {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.secondpart {
  white-space: nowrap;
  display: inline-block;
}

<div class="maincontent"> // main content
  <div class="firstpart">test content test content test content</div>
  <div class="secondpart">click to see more content</div>
</div>

预期截图

Answer 1

我想你正在寻找什么。

.maincontent {
  display: flex;
  flex-direction: column;
}

.firstpart {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.secondpart {
  white-space: nowrap;
}

<div class="maincontent"> // main content
  <div class="firstpart">test content test content test content</div>
  <div class="secondpart">click to see more content</div>
</div>