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

晨光熹微fd

于 2023-12-02 18:03:23 发布

阅读量334

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/yangyanqin2545/article/details/134755596

版权

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

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