Question

我发现这个在线代码段可以截断文字：

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>

Answer 1

执行此操作的一种方法是将div设置为固定大小，并将滚动设置为auto。如果内容导致滚动条出现，则从内容的末尾删除单词，直到滚动条消失。您可以通过在文本末尾附加带display:none的范围，然后将以空格开头的尾随字符集移动到范围中，直到获得所需结果为止。

然后在位于右下角的跨度之后添加省略号（即＆amp; hellip;而不仅仅是3个点）。要显示/隐藏额外内容，请将span的显示切换为none或''（空字符串）并相应地展开div。

Answer 2

以下不需要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>

为什么这个文本截断javascript不起作用？

2 个答案: