Javascript 可点击散列

我将此代码用于“查看更多”功能

并执行如下代码

<p class="trunc">Lorem <a href="test.html">ipsum</a> 
  dolor sit amet, consectetur adipisicing elit. 
  Hic, similique obcaecati quam aspernatur.
</p>
<script>
  $(".trunc").trunc(10);
</script>

Lorem
多洛·西特·艾米特，奉献给精英们。
Hic，类似于aspernatur的小白鼠。

$（“.trunc”）.trunc（10）；

---

但是“ipsum”不可点击，问题出在哪里？？？

问题出在这一行的

trunc（）

函数中：

var original=me.text（）

而代码只是获取文本，而不是实际的HTML。因此，所有HTML标记都将从句子中删除，无论是链接、strong、em等等。
（函数（$）{
 (function($) {
    $.fn.trunc = function(numWords) {
        this.each(function() {
            var me = $(this);
            var original = me.html();
            var truncated = original.split(" ");
            if (truncated.length <= numWords) {
                return;
            }
            while (truncated.length > numWords) {
                truncated.pop();
            }
            truncated = truncated.join(" ");
            collapse();

            function expand() {
                me.html(original);
                return false;
            }

            function collapse() {
                me.html(truncated + "... ");
                var link = $('<a href="#" id="seemore">See more</a>');
                link.click(expand);
                me.append().append(link).append();
                return false;
            }
        });
    };
     $(".trunc").trunc(10);
        })(jQuery);

$.fn.trunc=函数（numWords）{
这个。每个（函数（）{
var me=$（此）；
var original=me.html（）；
var truncated=original.split（“”）；
if（截断的.length numWords）{
截断的.pop（）；
}
截断=截断。联接（“”）；
塌陷（）；
函数展开（）{
html（原件）；
返回false；
}
函数折叠（）{
html（截断+“…”）；
变量链接=$（''）；
链接。单击（展开）；
me.append（）.append（link.append（）；
返回false；
}
});
};
$（“.trunc”）.trunc（10）；
})（jQuery）；

小提琴-
它是可点击的，但不是正常的链接。截断脚本只获取文本而不获取HTML，添加扩展链接以显示全文。
它添加了一个带有散列符号的读取更多链接。单击该链接时，expand（）方法将显示全文，就是这样

function expand() {
   me.text(original);
   return false;
}

function collapse() {
   me.text(truncated + "... ");
   var link = $('<a href="#" id="seemore">See more</a>');
   link.click(expand);
   me.append().append(link).append();
   return false;

函数展开（）{
me.文本（原件）；
返回false；
}
函数折叠（）{
me.text（截断+“…”）；
变量链接=$（''）；
链接。单击（展开）；
me.append（）.append（link.append（）；
返回false；

}

请参见此处的完整脚本：

如果要在截断时保留html，则需要使用正则表达式检查打开和关闭标记，如下所示：
为了实现保留HTML的目标，您需要采取类似的方法。这需要扩展您现在使用的截断方法。
对于仅CSS的解决方案，您可以这样做，但取决于要截断的像素宽度，而不是字符长度

.trunc {
    text-overflow: ellipsis;
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
}
.trunc:after {
    content: "Read more";
    float: left;
}
.trunc:active:after {
    content: "";
}
.trunc:active {
    text-overflow: auto;
    white-space: normal;
    overflow: visible;
    width: auto;
}

看到我在这里做的一个js提琴：
添加js函数，像这样=>我不确定。我没有创建函数。我认为CSS能够比JavaScript或JQuery更快、更有效地处理这个问题。JS的唯一用途是切换“已显示”和“需要显示的内容”这两个单独的元素。这只有9个单词。它是在
@SamuelCook字数之间分割空间，可以调整字数，但主要任务是截断和保留链接。主要任务是确定问题（已完成）。您提出的解决方案完全有缺陷。如果这就是你希望在这个社区中被了解的方式，那么请保留你的答案。谢谢你的建议：）