好吧，我花了一整天的时间试图找出正确的方法，但结果还不够，所以也许这里有人可以给我指出正确的方向。
问题：
我有一个带有“文章内容”类的 div。页面上大约有 2-10 个这样的内容。它们中的每一个都包含所见即所得的输出。即用 p 标签、一些强标签、em 标签甚至 img 标签包裹的文本。
我需要创建这些的预览/摘录版本，它不会显示图像，并将在 x 个字符的末尾附加一个 [...] +一个“阅读更多”链接。单击此按钮后，将显示完整的文章，包括图像。
我见过以下方法：
删除 x 个字符后的 div 内容并添加 [...] + 链接。这使得内容有点脆弱，因为它可以剥离结束标签，甚至剥离图像标签的中间，导致输出的 html 损坏。
更改内容元素的高度，并溢出：隐藏；。这可能会导致图像溢出到盒子之外 - 部分内容在里面，甚至根据行高与内容高度将一条线切成两半。这使得 js 非常依赖 css。
使用前 x 个字符创建新的内容元素，并在短版本和长版本上切换显示无/阻止。这会在标记中创建 2 个文本实例，这是我更喜欢的。这也使得元素展开时无法利用 css 过渡来实现高度。
我觉得有点奇怪，我无法找到一个防弹插件来完成这个看似简单且经常使用的任务。但也许我只是错过了一些东西。也许我在谷歌上搜索了错误的术语。这东西的正式名称是什么？切换展开？多读少读？展示更多？
什么被认为是最好的方法？有没有办法解决所有这些问题？
感谢您的时间
我认为最好的方法是，如果您希望所有客户端都使用包装器 div 来包装文本。
<div class="article">
<div class="text short">
Long Text
</div>
<span class="read-more">read more</span>
the .text.short例如将被设置为固定高度height:100px;
这read-more将通过单击事件进行设置，删除短期课程并添加完整课程。
Js 看起来像这样：
$(document).ready(function(){
$(".read-more").click(function(){
var $elem = $(this).parent().find(".text");
if($elem.hasClass("short"))
{
$elem.removeClass("short").addClass("full");
}
else
{
$elem.removeClass("full").addClass("short");
}
});
});
像这样的CSS：
.article {
border-bottom: 1px dotted grey;
padding: 3px;
margin: 2px;
}
.article .text {
font-size: 12px;
line-height: 17px;
font-family: arial;
}
.article .text.short {
height: 100px;
overflow: hidden;
}
.article .text.full {
}
.read-more {
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 3px;
background-color: #06c;
color: white;
margin: 2px;
}
使用 javascript 代码，您可以将字符、图像替换为您想要的任何内容。
我为你创建了完整的工作示例并且看起来不错jsFiddle http://jsfiddle.net/Q5Ewe/
Edit
使用 jquery 添加省略号。
see on jsFiddle http://jsfiddle.net/Q5Ewe/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
