用css显示更多功能

Question

我目前正在开发一个asp.net mvc应用程序,并使用css3进行所有显示.

我在屏幕上有一些文字,我想向用户显示一定数量的文字,并且能够点击"显示更多"的链接.

所以我会设置一个具有设定高度的div,点击该节目会显示其余的内容.

这可以通过css专门实现吗？

Answer 1

您可以使用选中(或无线电)输入来控制相邻div的可见性.您还可以隐藏输入控件并操纵输入的位置等,使其显示在内容下方.

<div class="container">
<input id="ch" type="checkbox">
<label for="ch"></label>
<div class="text"> your actual text goes here</div>
</div>

.text {
    height: 100px;
    overflow: hidden;
}
.container {
    position: relative;
}
label {
    position: absolute;
    top: 100%;
}
input {
    display: none;
}
label:after {
    content: "Show More";
}
input:checked + label:after {
    content: "Show Less";
}
input:checked ~ div {
    height: 100%;
}

http://jsfiddle.net/ExplosionPIlls/6sj4e/

Answer 2

您必须使用 css 才能使其看起来正确（在底部显示更多内容），但解决方案看起来像

<a id="showmore" href="#">Show More</a>
<div id="content">lots of content</div>

CSS：

<style>
#content { height: 100px; overflow: hidden; }
a#showmore:visited + #content { height: auto; overflow: visible}
</style>