前端文本省略号后面添加复制文字

前端文本省略号后面添加复制文字

1、效果图

2、代码展示

<div class="link-content-wrap" @click="copyLinkText"><div class="link-content">{{ shareResult.url || '' }} </div><span class="show-ellipsis" @click="copyLinkText"><span class="copy-link">复制链接</span></span>
</div>

.link-content-wrap {position: relative;margin: .1rem 0 .15rem;padding: .12rem .1rem;height: .72rem;box-sizing: border-box;background: #F5F8FD;border-radius: .04rem;word-break: break-all;line-height: .24rem;font-size: .14rem;color: rgba(50, 58, 89, 0.7);
}.link-content {position: relative;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;-webkit-line-clamp: 2;
}.show-ellipsis {position: absolute;bottom: .12rem;right: .1rem;z-index: 1000;background: #F5F8FD;
}.copy-link {color: rgba(13, 130, 250, 1);text-decoration: underline;text-underline: rgba(13, 130, 250, 1);
}