javascript - 在不剥离 JavaScript 中的 Html 标签的情况下阅读更多/更少

Question

我想实现 readmore/less 功能。即我将拥有 html 内容，我将显示该内容的前几个字符，并且在它前面会有一个阅读更多链接。我目前正在使用此代码:

    var txtToHide= input.substring(length);
    var textToShow= input.substring(0, length);
    var html = textToShow+ '<span class="readmore">&nbsp;&hellip;&nbsp;</span>' 
+ ('<span class="readmore">' + txtToHide+ '</span>');
    html = html + '<a id="read-more" title="More" href="#">More</a>';

上面的input是输入的字符串，length是初始显示的字符串的长度。这段代码有问题，假设我想从这个字符串中去掉 20 个字符: "Hello <a href='#'>test</a> output" , html 标签介于两者之间，如果部分剥离它会弄乱页面。我在这里想要的是，如果 html 标签落在范围内，它应该覆盖整个标签，即我需要这里的输出是 "Hello <a href='#'>test</a>" .我该怎么做

Answer 1

为什么不直接隐藏内容的隐藏部分而不是稍后添加呢？我通常只对隐藏内容使用 display: none 并在单击阅读更多内容时将其设置为 display: block..