我在 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>
关于jquery - 仅使用 jquery 获取被 css 隐藏的可见单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59352004/