仅使用 jquery 获取由 css 隐藏的可见单词答案

【问题标题】：get only visible words with jquery which are hidden by css仅使用 jquery 获取由 css 隐藏的可见单词
【发布时间】：2020-04-08 15:27:08
【问题描述】：

我在 div 中有一个段落，但我只想显示段落的几行，所以我使用下面的代码。

$(document).ready(function() {
  var words = "";
  var text = "";
  var count = '3';
  $("p").each(function(index) {
    words += ($(this).text()).trim();
  });
  $("#demo").empty();
  $('#demo').append('<div class="dummy" style="display: none;">' + words + '</div>');
  $(".dummy").css({
    "overflow": "hidden",
    "text-overflow": "ellipsis",
    "display": "-webkit-box",
    "-webkit-line-clamp": count,
    "-webkit-box-orient": "vertical",
    "display": "-webkit-box"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12" id="ltr" style="max-height: none; display: none;">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor.
  </p>
  <p>
    Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat.
  </p>
</div>
<p id="demo"></p>

这工作正常。

但现在我只想从.dummy 获取可见数据，然后将其放入任何文本框中。

为此我尝试了以下代码。

var data = $( ".dummy" ).html();
$('#data').val(data);

但它向我展示了完整的段落，不仅可见 3 行。

我怎样才能只从.dummy 获得可见行？

谁能帮帮我。

【问题讨论】：

你的整个 javascript 东西并没有真正做任何事情。它只是将您的整个文本放入一个 div 中，该 div 的 css 在 3 行之后不显示任何内容。您应该将可见和不可见文本彼此分开，并将其放在 2 个单独的 div 中。这样你就可以很容易地分辨出文本的哪一部分可见，哪一部分不可见

标签： jquery html css

【解决方案1】：

试试下面的代码。我在 Jquery 中添加了一些代码：

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
           var words = "";
           var text = "";
           var count = '3';
           $("p").each(function(index) {
             words += ($(this).text()).trim();
           });
           $("#demo").empty();
           $('#demo').append('<div class="dummy" style="display: none;">' + words + '</div>').after(function(e){

         $(".dummy").css({
            "overflow": "hidden",
             "text-overflow": "ellipsis",
             "display": "-webkit-box",
             "-webkit-line-clamp": count,
             "-webkit-box-orient": "vertical",
             "display": "-webkit-box"
           });
         });

         var abc = $(".dummy").clone();
          abc.removeAttr('style');
           console.log(abc.html())
             $('#demo1').html(abc.html())
         });
      </script>
   </head>
   <body>
      <div class="col-xs-12" id="ltr" style="max-height: none; display: ;">
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
         <p>
            Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor.
         </p>
         <p>
            Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat.
         </p>
      </div>
      <p id="demo"></p>
      <p id="demo1"></p>
   </body>
</html>

【讨论】：