将<button>插入图层样式文本溢出的末尾：省略号

Question

我正在尝试将[read more]按钮添加到多行省略号图层。

<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;
}

结果应该是，

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

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

Answer 2

试试这个：

.wrapper {
  position: relative;
  display: inline-block;
  width: 360px;
}

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

.btn {
  margin: 0; padding: 0 0 0 10px;
  background-color: transparent; border-width: 0; outline-width: 0;
  font-size: 14px; color: #3f8f7b;
  position: absolute;
  bottom: 15px;
  right: 0;
  cursor: pointer;
}

<div  class="wrapper">
	<p class="description">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.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.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.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.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.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.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.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.this is long text.this is long text. </p>
        <button type="button" class="btn">expand</button>
</div>	

Answer 3

我刚刚找到了javascript库，用于在省略号（...）之后添加更多按钮。

• http://dotdotdot.frebsite.nl

它支持选项，jQuery.dotdotdot（{＆＃39;＆＃39;：＆＃39; .classname＆＃39;}）添加按钮。