- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在寻找一种在响应式网站上创建幻灯片“显示更多”功能的方法,该功能在段落的两行之后会中断。
我之前通过静态网站实现了这一目标,方法是将容器设置为一定的高度并使用overflow: hidden
,然后对容器的高度进行动画处理。
但是,由于具有响应能力,容器以不同的浏览器宽度压缩文本,因此文本可能会占用更多/更少的空间。每次下推该段落时,段落上方也可能有不同的内容。因此,设置height
可能无法完全覆盖两行。
如果您需要演示,请查看以下jsFiddle:http://jsfiddle.net/XVAzU/。
因此,无论容器的宽度是多少,或者该段之前或之后的内容,我都需要在该段的两行之后截断。
感谢您的光临!
最佳答案
从小提琴开始,将内容包装到默认类为<div>
的content
中,该类用于选择,而一个名为hideContent
的类将在单击showContent
链接时与show more/show less
交换。
我还删除了文本所在的<p>
。该文本现在位于content-div中,并且我们现在还能够应用正确的高度和行高设置。
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>
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
line-height
将确保在所有浏览器中都相同。我对此不是100%肯定的。
$(".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);
});
$(".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://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<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>
关于javascript - 如何创建“显示更多”按钮并指定最初可以显示多少行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57067281/
我有一个使用 Sinch SDK 和 CallKit 实现的 VOIP 应用程序。一切正常,除了设备插入耳机时。在后一种情况下,当通话开始时,音频仍通过设备的主扬声器路由。如果我在通话期间拔下并重
我需要将大量复杂(20 多个属性)对象过滤成多个子列表。要创建子列表,我有一个过滤器规范列表。要求是:a) 不允许一个项目成为两个子列表的一部分,并且 b) 必须能够在处理完成后获取所有未分割的项目。
我有一个简单的 .share-toggle 切换链接。当您点击它时,Facebook 评论插件应该会显示。它最初应该被 Conceal 问题是,如果我使用 css Conceal 它,然后单击切换按钮
我正在尝试制作一个功能类似于 android 市场的图库,您可以在其中滚动(左/右)以查看免费或付费应用程序等...还可以在布局中上下滚动。 到目前为止,我只是让它加载了两个布局,它们都有一个简单的“
大家好,我是网络开发的新手,最近刚刚完成我对网络设计的第一次尝试。我偶然发现了一个我找不到解决方案的问题。在 webkit-browsers 中,我的一个 ul-lists(导航)最初呈现在错误的位置
我遇到了这个问题。我在 ISP 上使用 Umbraco CMS 启动了一个 ASP.NET 网站。(这只是一个非常基本的信息网站。没什么特别的。) 但是,当我想要访问该网站时,第一个页面加载需要很长时
在我的 iPhone 应用程序中,我使用 UITabBarController 布置了三个选项卡。第一个选项卡(在应用启动时加载)使用本地数据加载,速度非常快。 虽然第二个选项卡从网络下载 XML 文
我有这样的风格: #cytoscape-container { width: 100%; height: 100%; margin: 0 aut
我在这里看到了几篇关于 SO 的帖子,但它们在功能和结构上过于具体,而我正在寻找的是我或任何人都可以在任何地方使用的更通用的东西。 我只需要有一个按钮,单击该按钮可以在 3 类之间循环。但如果出现必须
我在 http://www.raven.dima.neoturbine.net/ 有一个网页我正在努力。顶部导航在 IE 8、Firefox 3.6 和适用于 Android 的 Dolphin 浏览
我想将主机的用户/组与 docker 机器同步,以使(开发人员)能够编辑容器内部或外部的文件。有一些这样的想法:Handling Permissions with Docker Volumes这会创建
向通知列表/栏发布推送通知时,.contentText 和 .number 最初不显示(.ticker、.icon 和 .contentTitle 显示正常)。但是,在发布另一个通知(具有不同的 ID
我实现了以下 MKMapView 方法,该方法在添加注释后运行。我在 Interface Builder 中将我的 MKMapView map (parishMap) 设置为“显示用户位置”,并且在加
我是一名优秀的程序员,十分优秀!