html - 将 <button> 插入层样式文本溢出 :ellipsis 的末尾

Question

我正在尝试将 [阅读更多] 按钮添加到多行省略号层。

<p class="description">this is long text.this is long text. <button type="button">expand</button></p>

.description {
  width: 300px;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.description button {
  margin: 0; padding: 0 0 0 10px;
  background-color: transparent; border-width: 0; outline-width: 0;
  font-size: 14px; color: #3f8f7b;
}

https://jsfiddle.net/redhork7/symuzrmt/

结果应该是这样的

this is long text.this is long text.this is long text.this is long text.
this is long text.this is long text.this is long text.this is long text.
this is long text.this is long text.this is long text...   [more button]

这可能吗？

Answer 1

按钮需要在最后一行的右边距还是可以在文本 block 下方？如果是，将其放在文本元素之外
但是
如果你需要它在右下角，你可以将文本内容设置为 position:relative 并将按钮设置为 position:absolute/right:0/bottom:0 ，但是这样按钮将与字符重叠盒子的尽头。