带有 HTML 和 CSS 的可扩展段落

Question

我想知道这里是否有人愿意帮助我。我正在寻找为我客户的网站制作可扩展的段落。他们想保留他们网站上的所有内容，这是相当庞大的，他们希望对设计进行全面改革。他们主要是为了 SEO 目的而保留它。无论如何，我认为如果有某种方法可以使用可扩展段落（您知道，在某行文本之后带有“阅读更多...”链接），这对双方的使用都会有所帮助。 我知道有一些 JQuery 和 Java 解决方案可以解决这个问题，但如果可能的话，我们真的希望远离这些选项。如果可以的话，什么时候需要 HTML 和 CSS。

这是一个例子：

前往这里

带有一堆文字的段落。我希望它出现在预定的行中。例如，也许段落的开头持续了三行，然后我们有 [阅读更多...]

当访问者点击“阅读更多”时，我们希望将其余内容展开以完整显示文章。我希望内容已经在页面上，所以它只是扩展。如果有意义的话，我不希望从另一个文件或任何东西中调用它。 预先感谢您的任何帮助。将不胜感激！

试听

Answer 1

一个简单的解决方案就是这样

您只需要在 css 中使用 display: none; 和 display: block; 进行 2 个切换事件

http://jsfiddle.net/6W7XD/1/

of course you would need to pre-program where you want to start the hide by including a div of it with the close button span inside the div to do the toggles

如果你决定用javascript它 这是您可以查看的内容

http://jedfoster.com/Readmore.js/

Answer 2

我认为你需要使用 Jquery 或 Javascript

$('a').click(function() {
    var p = $('a').prev('p')
    var lineheight = parseInt(p.css('line-height'))
    if (parseInt(p.css('height')) == lineheight*2) {
       p.css('height','auto');
       $(this).text('Less')
    } else {
       p.css('height',lineheight*2+'px');
       $(this).text('More')
    }
});

DEMO

Answer 3

这可以使用:target 选择器来实现，用于无 jQuery/Javascript 的选项。

为此，您需要将每个扩展文本设置为目标（给它们一个 id）。然后，将“显示更多”选项卡设置为上述 id/target 的目标。

类似：

.article {
    position: relative;
    border: 1px solid grey;
    overflow: hidden;
    width: 300px;
}
.article:target {
    height: auto;
}
.article:not(target) {
    height: 50px;
}
.toggle {
    padding: 2px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: white;
    border: 1px solid red;
}

您可以查看可测试的小提琴here。

请注意，我使用:not(:target) 来确保未选中时它的大小正确。