仅使用jss隐藏由CSS可见的单词

问题描述 投票:1回答:1

我在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中获得可见线?

有人可以帮我这个忙。

jquery html css
1个回答
0
投票

请尝试以下代码。我在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>
© www.soinside.com 2019 - 2024. All rights reserved.