从小提琴开始，将内容包装到中
<div>，默认类为
content，用于选择，单击链接时
hideContent将替换为的类。
showContent``show more/show less
我还删除了
<p>文本所在的位置。该文本现在位于content-div中，并且我们现在还能够应用正确的高度和行高设置。
HTML：
<div > <h1>Title goes here</h1> <h2>Subtitle</h2> <div > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <p>Some more text</p> <ul> <li>Some more text</li> <li>Some more text</li> <li>Some more text</li> </ul> </div> <div > <a href="#">Show more</a> </div></div>
CSS：
.hideContent { overflow: hidden; line-height: 1em; height: 2em;}.showContent { line-height: 1em; height: auto;}我假设设置
line-height将确保在所有浏览器中都相同。不过，我不确定100％。
我将click事件附加到“显示更多”链接，该链接使用jQueryUI
switchClass（） 在div上切换类：
$(".show-more a").on("click", function() { var $this = $(this); var $content = $this.parent().prev("div.content"); var linkText = $this.text().toUpperCase(); if(linkText === "SHOW MORE"){ linkText = "Show less"; $content.switchClass("hideContent", "showContent", 400); } else { linkText = "Show more"; $content.switchClass("showContent", "hideContent", 400); }; $this.text(linkText);});JsFiddle演示-显示更多/显示更少，并应用行高和动画
$(".show-more a").on("click", function() { var $this = $(this); var $content = $this.parent().prev("div.content"); var linkText = $this.text().toUpperCase(); if (linkText === "SHOW MORE") { linkText = "Show less"; $content.switchClass("hideContent", "showContent", 400); } else { linkText = "Show more"; $content.switchClass("showContent", "hideContent", 400); }; $this.text(linkText);});div.text-container { margin: 0 auto; width: 75%;}.hideContent { overflow: hidden; line-height: 1em; height: 2em;}.showContent { line-height: 1em; height: auto;}.showContent { height: auto;}h1 { font-size: 24px;}p { padding: 10px 0;}.show-more { padding: 10px 0; text-align: center;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script><script src="https://pre.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><div > <h1>Title goes here</h1> <h2>Subtitle</h2> <div > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <p>Some more text</p> <ul> <li>Some more text</li> <li>Some more text</li> <li>Some more text</li> </ul> </div> <div > <a href="#">Show more</a> </div></div>上面的代码仅是示例，但应该使您入门正确。
