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

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

按钮需要位于最后一行的右边距，或者可以位于文本块下方？如果是，请将其放在文本元素之外
但
如果您需要它在右下角，您可以将文本内容设置为位置：相对，将按钮设置为位置：绝对/右：0/底部：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({ 'after'： '.classname' })作为添加按钮。