Question

我正在尝试更多显示/显示指定高度为200px的链接，点击时显示其余内容。超过200px的任何内容都将被隐藏，并且会显示更多链接，显示其余文本，我不知道如何执行此操作是指向我的代码Fiddle的链接。

<p>You’re here because you’re concerned about how electromagnetic radiation may be affecting your health.</p>
<p class="h3">You’ve heard that you need to protect yourself!</p>
<p>But from What? EMF? EMC? EMR? EHS? MW? RFR? RF?</p>
<p class="h3">What does it all mean?</p>
<p>EMF stands for ElectroMagnetic Field or Frequency.</p>
<p>Everything God created has its own electromagnetic field.Additionally, everything electronic that man makes has an electromagnetic field as well. It is a measurable type of energy, and for the human body the EMF energy is what powers every cell in our body. <span class="bold">Every living function, whether conscious or subconscious, physical or mental, is powered by low levels of electrical current in our bodies.</span> Have you ever thought about why we use electric shock paddles to restart a heart?</p>
<p>EMC (ElectroMagnetic Chaos) is just a more dramatic way of saying EMF.</p>
<p>EMR (ElectroMagnetic Radiation) is the energy projected from the electromagnetic frequencies.</p>
<p>Just as there are <span class="bold">good fats and bad fats</span> for our body and <span class="bold">good sugars and bad sugars</span> for our body, so there are <span class="bold">good EMFs and bad EMFs</span> for our body.</p>
<p class="h3">So why are some EMFs harmful to our bodies?</p>
<p>God designed the human body with very specific EMF frequencies. Healthy tissue has these strong God-given frequencies. Unhealthy or diseased tissue has weak or unnatural frequencies.</p>
<p>Our healthy EMF frequencies become weak or altered for various reasons, but most commonly by <span class="bold">too much exposure to unnatural EMF frequencies</span> which are out of the realm of our healthy body frequencies.</p>
<p class="h3">Does it really affect us? Is it really killing us?</p>
<p>Electromagnetic Hypersensitivity (EHS), also known as electromagnetic sensitivity and electrohypersensitivity, occurs when the amount of EMF radiation exceeds the body’s ability to deal with it. Once that happens, because of many small EMF exposures or sometimes just one very large exposure, all future exposure can cause a host of health problems, ranging from <span class="bold">headaches, fatigue, depression, allergies, insomnia, asthma, chest pains, erratic heartbeat, high blood pressure, brain fog, ADD/ADHD, digestive disorders & skin disorders to more serious diseases like cancer, alzheimers, parkinsons, fibromyalgia, MS and countless autoimmune & neurological conditions</span>.</p>
<p>The <span class="bold">body was not designed to thrive in the constant presence of all this radiation</span> - electric, magnetic, wireless or ionizing - as many of us are doing today.</p>
<p class="h3">Do the EMF Protection Devices really work?</p>
<p class="bold">The short answer - ABSOLUTELY!</p>
<p>The technology used in all of our EMF Protection Devices is the <span class="bold">same technology that is used to protect computer CPUs</span>. Is EMF real? Well, think about this. Without protection, a computer's CPU would not be able to function due to all the conflicting EMF chaos. <span class="bold">Without this protection computer CPUs would be rendered useless</span>. Computer manufacturers have been using this technology for decades. But it wasn't until recently that <span class="bold">we have begun using that same technology to protect ourselves</span>.</span>

Answer 1

您需要将内容包装在容器元素中，例如DIV：

<div id="wrapped_text">
     // full content here
</div>

然后添加一个新的DIV以使其看起来漂亮，并添加一个span类来保存切换文本。你应该在关闭包装器DIV之前添加它，它将使定位工作。

<div class="fade_text"></div>
<span class="show_text">Show More</span>
<span class="hide_text">Hide This</span>

现在设计一切：

#wrapped_text {
     width: 600px;
     height: 200px;
     position: relative;
}

.fade_text {
     bottom: 0;
     position: absolute;
     width: 600px;
     z-index: 9999;
     background: url('img/fade_text.png') transparent no-repeat;
}

span.show_text {
     overflow: hidden;
     text-decoration: underline;
     position: absolute;
     bottom: 0;
}

span.hide_text {
     overflow: hidden;
     text-decoration: underline;
     display: none;
     position: absolute;
     bottom: 0;
}

现在使用jQuery使一切正常。

$("span.show_text").click(function() {
     $(this).hide();
     $("span.hide_text").show();
     $("div.fade_text").hide();
     $("div#wrapped_text").css("height","auto");
});
$("span.hide_text").click(function() {
     $(this).hide();
     $("span.show_text").show();
     $("div.fade_text").hide();
     $("div#wrapped_text").css("height","auto");
});

这应该有效，随时可以对任何问题发表评论。

Answer 2

我建议尝试将所有文字整理到一个<div>并使用CSS的overflow属性。

<强> HTML

<div class="info-container">
    <!--Some Info--->
</div>

<强> CSS

.info-container {
    height: 200px;
    overflow: hidden;
}

然后你应该看看this question以确定是否有超过200px的信息。如果有，则显示一个按钮并让您的脚本删除<div>的高度以显示所有文本。

希望这有帮助。

Jquery显示更多高度显示而不是字符

2 个答案: