Question

我已经缩短了一个超长的字符串，并使用省略号将其缩短。截断后，有没有办法复制整个字符串？

我创建了一个代码笔来辅助：https://codepen.io/anon/pen/MMGoLL

    <h1>
   This little piggy went to market and this little piggy stayed home.
   </h1>

           h1 {
     width: 200px;
    white-space: nowrap;
   overflow: hidden;
    text-overflow: ellipsis;

  padding: 20px;
   font-size: 1.3rem;
   margin: 0;
   background: white;
   resize: horizontal;
   }

  body {
   height: 100vh;
  display: grid;
   place-items: center;
   background: #ccc;
  }

谢谢。

Answer 1

向标题元素添加ID：

lambda expression

现在您可以访问元素内的文本：

static initialization block

Answer 2

您的Codepen与解决方案。更新以将内容复制到剪贴板。

copy = function(){
    let element = document.getElementById("text");
    if(document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
        document.execCommand("Copy");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    //alert("copied!") //alert among other methods can be used to auto deselect if you desire that
  }
}

h1 {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  padding: 20px;
  font-size: 1.3rem;
  margin: 0;
  background: white;
  resize: horizontal;
}

body {
  height: 100px;
  display: grid;
  place-items: center;
  background: #ccc;    
   }

<html>
<body>
<h1 id="text">
  This little piggy went to market and this little piggy stayed home.
</h1><button id="copyButton" onclick="copy()">Copy</button>
</body>
</html>

Answer 3

实际上，当通过CSS使用省略号时，您不是在截断字符串，而是隐藏起来。因此，双击，选择所有文本，直到省略号并复制到剪贴板。您正在复制整个字符串。

需要一种方法来复制缩短的超长字符串

3 个答案: