附加“;显示更多“;仅当满足设定的字符数时，链接到截断的段落

我编写了一个纯javascript来处理您的请求，请参阅此处的演示：https://jsfiddle.net/IA7medd/751sLn0n/

HTML:

<div class="container">
      <div class="events-left-col">
        <h2 class="eventTitle">Event Title</h2>
          <div class="wrap">
            <div class="truncate">
              <p class="toggledText">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
                  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
                  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
                  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait 
                  nulla facilisi.
              </p>
            </div>
          </div>
          <div class="wrap">
            <div class="truncate">
              <p class="toggledText">
                  Not enough characters here to show/append the "Read more" link
              </p>
            </div>
          </div>
           <div class="wrap">
            <div class="truncate">
              <p class="toggledText">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
                  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
                  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
                  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait 
                  nulla facilisi.
              </p>
            </div>
          </div>

        </div>
      </div>

样式：

.toggledText span.trimmed{
  display:none;
}
.read-more .more:before{
  content:'Read More';
}
.showAll .toggledText span.morePoints{
  display:none;
}
.showAll .toggledText span.trimmed{
  display:inline;
}
.showAll .read-more .more:before{
  content:'Read Less';
}

脚本：

var charLimit = 120;
        var numberOfToggled = document.getElementsByClassName('toggledText');
        for(i=0; i<numberOfToggled.length; i++){
            var el = numberOfToggled[i];
            var elText = el.innerHTML.trim();
            if(elText.length > charLimit){
                var showStr = elText.slice(0,charLimit);
                var hideStr = elText.slice(charLimit);
                el.innerHTML = showStr + '<span class="morePoints">...</span> <span class="trimmed">' + hideStr + '</span>';
                el.parentElement.innerHTML = el.parentElement.innerHTML + "<div class='read-more'><a href='#' class='more'></a>";
            }
        }
        window.onclick = function(event) {
            if (event.target.className == 'more') {
                event.preventDefault();
                event.target.parentElement.parentElement.classList.toggle('showAll');
            }
        }

我还对你的代码进行了一些编辑，效果很好。你可以在这里看到：https://jsfiddle.net/IA7medd/j78L76qj/（如果需要）

我对您的代码进行了一些更改。我已经列出了我帮助你理解的方法

1. 遍历每个.truncate
2. 检查总字符长度是否大于122
3. 如果CCD_ 2移除类CCD_；添加类别modHeight
4. 点击链接，移除modHeight&添加类'normHeight'

下面的片段可能是有用的

var charLimit = 122;
function _truncate(el) {
      var _clone = el.children().first();
       //Removing white space & checking length
        // _clone[0] because _clone is array of jquery object
        if(_clone[0].innerHTML.trim().length>charLimit){  
           _clone.removeClass('normHeight').addClass('modHeight');
         //Appending read me link
          el.append($("<div class='read-more'><a href='#' class='more'>Read More</a>"));
       }
    }
    // Since a.more is dynamic element so using event delegation.
    $("body").on("click",'a.more',function (e) {
      e.preventDefault();
      $(this).parent().siblings('p.modHeight').removeClass('modHeight').addClass('normHeight');
      $(this).hide(); // Once entire text is visible remove read me link
    });
    $(".truncate").each(function () {
        _truncate($(this));
    });

还要注意HTML和CSS 的微小变化

检查这个jsfiddle的演示

我已经将您的js更改为following，它运行良好，正如您所期望的那样。我在更改行后添加了注释。

var charLimit = 122;
function truncate(el) {
    var shortText = $('<p/>'), //create new <p/> instead of clone
      originalContent = el.html(),
      text = el.text().trim(); // take all text & trim starting and trailing white spaces
    if (text.length > charLimit) { //check char limit overflow
        el.next(".read-more").length || el.after('<div class="read-more"><a href="#" class="more">Read More</a>'); //append "Read More" button if not exist 
        el.attr("data-originalContent", originalContent);
        shortText.text(text.substring(0, charLimit) + "...")
        el.html(shortText); // use html() instead of empty() and append()
    }
}
function reveal(el) {
    el.html(el.attr("data-originalContent"));
}
$(".container").on("click", ".more", function (e) { //use delegated event for dynamically added "Read More" button
    e.preventDefault();
    var truncateElement = $(this).parent().prev(".truncate"); //change here as we added "Read More" button after ".truncate"
    if ($(this).text() === "Read More") {
        $(this).text("Read Less");
        reveal(truncateElement);
    } else {
        $(this).text("Read More");
        truncate(truncateElement);
    }
});
$(".truncate").each(function () {
    truncate($(this));
});

工作演示

我刚刚在您的代码中添加了一个小部分

$(".truncate").each(function(){
if($(this).length < 122) {
  $(this).parent().next().find(".read-more").hide();    
  } 
});  

并改变了

function truncate(el) {
  var clone = el.children().first(),
      originalContent = el.html(),
      text = clone.text();  
  if(text.length>charLimit) {
   el.attr("data-originalContent", originalContent);
   clone.text(text.substring(0, charLimit) + "...")
   el.empty().append(clone); 
   } 
}

更新的Fiddle