为什么此文本截断javascript无法正常工作？

问题描述

| 我在网上找到了可截断文本的代码段： http://www.barelyfitz.com/projects/truncate/ 问题是，脚本将href放在要截断的文本所在的容器中，单击时，其余测试会扩展，但显示更多链接（点点）消失了。我希望该链接始终存在，因为我希望用户能够像他们在youtube中一样来切换显示更多/更少的内容。 他的脚本如何进行更改才能以这种方式工作，或者新脚本的外观如何。这是我使上述脚本无法按我需要的方式进行的失败尝试：

<script type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js\"></script>

<p id=\"truncateMe\" style=\"border: 1px solid red\">Lorem ipsum dolor sit amet,consectetuer adipiscing
elit. Aenean consectetuer. Etiam venenatis. Sed ultricies,pede sit
amet aliquet lobortis,nisi ante sagittis sapien,in rhoncus lectus
mauris quis massa. Integer porttitor,mi sit amet viverra faucibus,urna libero viverra nibh,sed dictum nisi mi et diam. Nulla nunc eros,convallis sed,varius ac,commodo et,magna. Proin vel
risus. Vestibulum eu urna. Maecenas lobortis,pede ac dictum pulvinar,nibh ante vestibulum tortor,eget fermentum urna ipsum ac neque. Nam
urna nulla,mollis blandit,pretium id,tristique vitae,neque. Etiam
id tellus. Sed pharetra enim non nisl.</p>

<div id=\"link\"></div>

<script type=\"text/javascript\">

var len = 100;
var p = document.getElementById(\'truncateMe\');
if (p) {

  var trunc = p.innerHTML;
  if (trunc.length > len) {

    /* Truncate the content of the P,then go back to the end of the
       prevIoUs word to ensure that we don\'t truncate in the middle of
       a word */
    trunc = trunc.substring(0,len);
    trunc = trunc.replace(/\\w+$/,\'\');

    /* Add an ellipses to the end and make it a link that expands
       the paragraph back to its original size */
    trunc += \'<a href=\"#\" \' +
      \'onclick=\"this.parentNode.innerHTML=\' +
      \'unescape(\\\'\'+escape(p.innerHTML)+\'\\\');return false;\">\' +
      \'...<\\/a>\';
    p.innerHTML = trunc;


    trunc2 = \'<a href=\"#\" \' +
      \'onclick=\"$(\\\'truncateMe\\\').innerHTML=\' +
      \'unescape(\\\'\'+escape(p.innerHTML)+\'\\\');return false;\">\' +
      \'More<\\/a>\';


    $(\'#link\').html(trunc2);

  }
}

</script>

    

解决方法

一种方法是将div设置为固定大小，并将滚动设置为auto。如果内容导致滚动条出现，则从内容末尾删除单词，直到滚动条消失。为此，可以在文本末尾附加一个带有

display:none

的跨度，然后将以空格开头的尾随字符集移动到跨度中，直到获得所需的结果。 然后，在位于右下角的跨度之后添加一个省略号（不仅是3个点，而且是＆hellip;）。要显示/隐藏额外的内容，请将范围的显示切换为无或\'\'（空字符串），并相应地扩展div。     ,以下不需要DIV。我只是重写了您的代码以使其正常工作。可能是您可以增强它以完全使用jQuery等...

<script type=\"text/javascript\">

// Set the variables
var len = 100;
// the following will add the less link
var less = \"<a href=\'#\' onclick=\'toggleDisplay(); return false;\'>less</a>\";
var p = document.getElementById(\'truncateMe\');

// This method handles the more/less stuff
function toggleDisplay(){
if (p) {

  var trunc = p.innerHTML;
  if (trunc.length > len) {
    p.innerHTML = trunc + less;
    less = \"\";// so that it doesn\'t keep adding less at the end everytime

    /* Truncate the content of the P,then go back to the end of the
       previous word to ensure that we don\'t truncate in the middle of
       a word */
    trunc = trunc.substring(0,len);
    trunc = trunc.replace(/\\w+$/,\'\');

    /* Add an ellipses to the end and make it a link that expands
       the paragraph back to its original size */
    trunc += \'<a href=\"#\" \' +
      \'onclick=\"this.parentNode.innerHTML=\' +
      \'unescape(\\\'\'+escape(p.innerHTML)+\'\\\');return false;\">\' +
      \'more<\\/a>\';
    p.innerHTML = trunc;
  }
}//end if
}//end method

// Calling outside ( call it on page load...)
toggleDisplay();

</script>