我有div，其中包含长文字。我想确保在加载页面后我的div会显示前几个单词，点击它之后，它会展开并显示整个长文本。如何在Javascript或jQuery和CSS中创建它？我知道类的名称，id等，但我无法访问html文件，因此我无法在html文件中编写其他代码。
谢谢你的帮助！
答案 0 :(得分：1)
overflow div
执行此操作的一种方法是在您height上设置div的位置编写css，并将overflow设置为hidden。
在click上div之后，overflow可以设置为visible：
<强> HTML
<div class='container'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero. Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla
hendrerit, molestie dui at, ultrices sapien...
</div>
<强> CSS
.container {
height: 1.5rem;
overflow: hidden;
}
<强>的JavaScript
$(document).ready(function() {
$(".container").click(function() {
$(this).css("overflow", "visible");
});
});
<强> CodePen Demo
overflow和JQuery＆＃39; s toggleClass div
如果要在单击div时显示和隐藏文本，可以使用相同的css overflow策略并在JQuery中切换类，如下所示：
<强> HTML
<div class='container'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero. Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla
hendrerit, molestie dui at, ultrices sapien...
</div>
<强> CSS
.container {
height: 1.5rem;
overflow: hidden;
}
.container:hover {
cursor: pointer;
}
.expand {
overflow: visible;
}
<强>的JavaScript
$(document).ready(function() {
$(".container").click(function() {
$(this).toggleClass("expand");
});
});
<强> CodePen Demo
slideDown div进行动画制作
如果要为其设置动画，可以显示和隐藏要展开的文本。我使用div作为额外的扩展文本，因此它被强制转移到下一行（这是更友好的响应）：
<强> HTML
<div class='container'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa
dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero.
<div id='more'>
Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla hendrerit,
molestie dui at, ultrices sapien. In iaculis nunc sapien, sit amet iaculis velit viverra in. Proin in massa magna. Nullam volutpat...
</div>
</div>
<强> CSS
.container:hover {
cursor: pointer;
}
#more {
display: none;
}
<强>的JavaScript
$(document).ready(function() {
$(".container").click(function() {
if ($("#more").is(":hidden")) {
$("#more").slideDown("fast");
} else {
$("#more").hide();
}
});
});
<强> CodePen Demo
答案 1 :(得分：0)
这是你需要的吗？
$("div").on("click", function() {
$(this).css({"overflow":"auto", "white-space":"normal"});
}).truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed leo urna. Fusce varius turpis non elit interdum, quis consectetur neque sollicitudin. Suspendisse ipsum mauris, posuere quis est ac, hendrerit iaculis mauris. In ultrices volutpat rhoncus. Suspendisse semper velit libero, ut consequat erat elementum non. Nullam eu imperdiet quam. Quisque ullamcorper molestie vehicula. Praesent non tellus cursus, cursus urna a, feugiat justo. Sed sit amet efficitur quam. Morbi enim urna, varius eget sodales quis, gravida eu lacus. Donec dignissim dapibus cursus. Donec vulputate lacus purus, porttitor tincidunt velit eleifend ac. Praesent vestibulum lectus quis maximus gravida. Donec et lorem eu arcu volutpat maximus. Proin nulla nibh, blandit a hendrerit at, condimentum vel libero.</div>
答案 2 :(得分：0)
你可以制作2个Div，一个带有第一个部分，然后当点击div时显示另一个包含所有内容的div并隐藏第一个div。
<div onclick="showall();" id="somecontent">Some words</div>
<div id="fullcontent" style="display: none;">All content</div>
<script>
function showall(){
$('#fullcontent').show();
$('#somecontent').hide();
}
</script>
答案 3 :(得分：0)
我尝试为你创造一个小提琴。不确定这是否正是你想要的。
您可以在span内创建div并设置其display:none。然后从jQuery click您可以再次将显示更改为inline。
这里是小提琴：https://jsfiddle.net/gw164g4x/1/
$(document).ready(function(){
$("div").click(function(){
$("span.clickshow").css("display","inline");
})
});.clickshow{
display:none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Lorem ipsum dolor sit amet, consectetur
<span class="clickshow">adipisicing elit. Nulla sapiente natus nesciunt, nostrum. Cum excepturi, assumenda laboriosam voluptatibus quia, aut aspernatur. Dolorem qui obcaecati tenetur repudiandae minus libero ea ratione.</span>
</div>
答案 4 :(得分：0)
最简单的方法，
document.getElementById("content").onclick = function() {
this.style.height = 'auto';
}#content {
border: 1px solid red;
height: 1em;
padding: 2px;
overflow: hidden
}<div id="content">
<b>This is a Heading</b>
<p>This is a paragraph.</p>
</div>
答案 5 :(得分：0)
我认为这是你需要的，如果你不喜欢帖子，请忽略
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});.morecontent span {
display: none;
}
.morelink {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
答案 6 :(得分：0)
你可以这样做：
var longtext = "Lorem ipsum dolor ljghlkjghdfghjd lkfhglkdgjlskgj;ljglksjg sldjlsdjlgsdj;lsdj g;lsdkjglsjgl;sdj; ldkjlsd;jgs";
var smalltext = "Lorem ipsum dolor";
$(function() {
$("#mydiv").text(smalltext);
var done = false;
$("#mydiv").click(function() {
if (!done) {
done = true;
$(this).text(longtext);
}
});
});