如何创建“显示更多”按钮并指定最初可显示多少行文本 [英] How to create a "show more" button and specify how many lines of text can be initially shown

问题描述

我正在寻找一种在响应式网站上创建显示更多功能的方法，该功能在段落的两行之后切断。

I'm looking for a way to create a slide out 'show more' feature on my responsive site, which cuts off after two lines of a paragraph.

我之前通过使用静态网站，通过应用设置高度到容器并使用 overflow：hidden ，然后动画高度

I've achieved this before with a static website, by applying a set height to the container and using overflow: hidden, and then animating the height of the container.

但是，响应式，容器以不同的浏览器宽度压缩文本，因此文本可能占用更多/更少的空间。也可以在段落上方每次将其推下来时有不同的内容。所以设置 height 可能不会完全覆盖两行。

But being responsive, the container squashes the text at different browser widths, so the text might take up more/less room. Also there may be different content above the paragraph each time pushing it down. So the setting height might not cover two lines exactly.

请检查这个jsFiddle： http://jsfiddle.net/XVAzU/ 如果您需要演示。

Please check out this jsFiddle: http://jsfiddle.net/XVAzU/ if you need to demonstrate.

因此，我需要在段落的两行之后切断，无论容器的宽度是多少，或者在该段落之前或之后。

So I need to cut off after two lines of the paragraph, no matter what width the container is or what comes before or after that paragraph.

感谢您的查找！

推荐答案

从您的小提琴开始，将内容封装到< div> 使用默认类 content 用于选择，以及名为 hideContent 的类，它将与 showContent 时，单击 show more / show less 链接。

Starting from your fiddle and wrapped the content into a <div> with a default class of content, used for selection and a class called hideContent which will be swapped with showContent when clicking the show more/show less link.

我也删除了文本所在的< p> 。文本现在在content-div现在我们也可以应用正确的高度和行高设置。

I also removed the <p> the text was in. The text is now within the content-div and we are also now able to apply correct height and line-height settings.

HTML：

<div class="text-container">
    <h1>Title goes here</h1>
    <h2>Subtitle</h2>
    <div class="content hideContent">
        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 class="show-more">
        <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％确定虽然。

I'm assuming setting the line-height will ensure it is the same in all browsers. I'm not 100% certain on that though.

我附加了一个点击事件到显示更多链接切换div上的类使用jQueryUI switchClass（） ：

I attached a click event to the "show more" link which switches the classes on the div using jQueryUI switchClass():

$(".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);
});​

DEMO - 显示更多/显示更少并应用行高和动画

上面的代码只是一个例子，但应该让你开始正确的方向。

DEMO - show more / show less and applying line-height and animation

The above code is an example only but should get you started into the right direction.

这篇关于如何创建“显示更多”按钮并指定最初可显示多少行文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！