我在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中添加了一些代码:
<!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>