js实现copy text 复制功能及css实现内容过长进行省略...

coder_wangs

已于 2024-05-31 10:53:33 修改

阅读量1.1k

点赞数

文章标签：大数据

于 2022-06-29 11:10:05 首次发布

本文链接：https://blog.youkuaiyun.com/web_wp/article/details/125516892

版权

1.copy text 复制功能

const copyText = function() {
  return `<p class="el-button--text" style="margin-left:10px" onclick="
                      let oInput = document.createElement('input') // 生成一个节点
                      oInput.value = this.parentNode.innerHTML.split('<el-button')[0].split('：')[1]  // 你要复制的文本
                      document.body.appendChild(oInput) // 插入文档
                      oInput.select() // 选择对象
                      document.execCommand('Copy') // 执行浏览器复制命令
                      document.body.removeChild(oInput) //移除标签
                      this.innerHTML = '复制成功'
                      setTimeout(() => {
                        this.innerHTML = '复制'
                      }, 1000)
              ">复制</p>`
}

2.css实现内容过长进行省略...

    <p style="width:152px;word-break: keep-all;overflow: hidden;text-overflow: ellipsis;">
      我是一个p标签当我超出内容太长则会进行省略号
    </p>

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* 保证文本换行 */
  // max-height: 3em; /* 根据行高和行数调整 */
  // line-height: 1.5em; /* 行高，根据实际情况调整 */
}

示例