使用css显示更多功能

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

我在屏幕上有一些文字，我想向用户显示一定数量的文字，并能够单击链接“显示更多”

因此，我将有一个具有设置高度的div，单击showmore将显示其余内容

---

这只能通过css来实现吗？

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

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

很多内容

CSS:

#内容{高度：100px；溢出：隐藏；}
a#showmore:visited+#内容{高度：自动；溢出：可见}

您可以使用选中（或无线）输入来控制相邻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%;
}

你的实际文本在这里
.文本{
高度：100px；
溢出：隐藏；
}
.集装箱{
位置：相对位置；
}
标签{
位置：绝对位置；
最高：100%；
}
输入{
显示：无；
}
标签：后{
内容：“展示更多”；
}
输入：选中+标签：之后{
内容：“少展示”；
}
输入：选中~div{
身高：100%；
}

---

您可以使用

：target

选择器

HTML

<a id="showmemore" href="#contentofsite">Show More</a>
<div id="contentofsite">
    ......
    ......
    ......
    ......
</div>

<a id="showmemore" tabindex="0" href="#">Show More</a>
<div id="contentofsite">
    ......
    ......
    ......
    ......
</div>

---

或者您可以使用

：focus

伪类

HTML

<a id="showmemore" href="#contentofsite">Show More</a>
<div id="contentofsite">
    ......
    ......
    ......
    ......
</div>

<a id="showmemore" tabindex="0" href="#">Show More</a>
<div id="contentofsite">
    ......
    ......
    ......
    ......
</div>

---

漂亮的CSS唯一解决方案+1简单干净。

#contentofsite { 
    height: 50px; 
    overflow: hidden; 
}
#showmemore:focus + #contentofsite { 
    height: auto;
    overflow: visible;
}