在长字符串中显示更多按钮从字符串中删除 HTML 标记答案

【问题标题】：Show more button in a long string removes HTML tags from the string在长字符串中显示更多按钮从字符串中删除 HTML 标记
【发布时间】：2022-07-21 22:50:50
【问题描述】：

我发现了这个错误，每当我尝试在 javascript 中使用 Read More/Less 功能时，字符串中的 HTML 标记都会被删除。我想保留 HTML 标签

var maxContentLength = 700;
                            $('.user_comments').each(function() {
                              var text = $(this).text();
                              if (text.length > maxContentLength) {
                                var begin = text.substr(0, maxContentLength);
                                var end = text.substr(maxContentLength);

                                $(this).html(begin)
                                  .append($('<a class="readmore"/>').attr('href', '#more_comment').html(' ...Read More'))
                                  .append($('<span class="hidden_comment" id="more_comment"/>').html(end));

这是我正在使用的代码。关于如何保留 HTML 标签的任何修复

【问题讨论】：

您对问题的描述毫无意义。您能否编辑问题以将所有相关代码包含在有效的 sn-p 中。我认为问题是因为您使用的是text()，它忽略了所有 HTML。

标签： javascript html jquery css append

【解决方案1】：

您想阅读更多/阅读更少的描述我有一个例子希望它会帮助你很多。 HTML：

 <p class="product_description m-0">5.6-ounce, 58/38/4 cotton/poly/spandex jersey with stay-cool wicking technology OGIO heat transfer label for tag-free comfort Self-fabric cadet collar Exposed coil zipper with locking zipper pull Set-in, open hem sleeves Flat matte silicone O heat transfer on back collar Side vents Woven badge with matte silicone O on front left hem Slight drop tail open hem</p>
                                            <div class="readmore">Read more</div>

CSS：

.product_description
    {
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }
    .readmore,
    .readless
    {
        margin-bottom:30px;
        font-size: 14px;
        cursor: pointer;
        color: #4285F4;
    }

查询：

$(document).on("click", ".readmore", function(e){
                e.stopPropagation();
                $(this).prev().css("display", "block");
                $(this).prev().prev().css("display", "block");
                $(this).removeClass("readmore").addClass("readless").text("Read less");
            });
            $(document).on("click", ".readless", function(e){
                e.stopPropagation();
                $(this).prev().css("display", "-webkit-box");
                $(this).prev().prev().css("display", "-webkit-box");
                $(this).removeClass("readless").addClass("readmore").text("Read more");
            });

检查此jsfiddle 示例。

【讨论】：