如何解决为什么此文本截断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
<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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。