阅读更多带有图像的div 展开/折叠 切换摘录/内容

Question

好吧，我一直在花一整天的时间试图找出正确的方法，但结果很短，所以也许这里有人可以指出我正确的方向。

问题：我有一个带有"文章内容"类的div。页面上大约有 2-10 个。它们中的每一个都将包含所见即所得的输出。即包裹在 p 标签、一些强标签、em 标签甚至 img 标签中的文本。

我需要创建这些的预览/摘录版本，该版本不会显示图像，并将在x个字符的末尾附加一个[...] + "阅读更多"链接。单击此按钮时，将显示包括图像在内的完整文章。

我看到了以下的掌声：

1. 在 x 个字符之后剥离div 的内容并添加 [...] + 链接。这使得内容有点脆弱，因为它可以剥离结束标签，甚至剥离图像标签的中间，从而导致输出损坏的 html。

更改

2. 内容元素的高度，并更改溢出：隐藏;。这可能会导致图像溢出包装盒 - 里面有一部分，甚至根据行高与内容高度将一行切成两半。这使得JS非常依赖于CSS。

3. 使用前 x 个字符创建新的内容元素，并在短版本和长版本上切换显示无/块。这会在标记中创建文本的 2 个实例，我更喜欢。这也使得在元素扩展时无法利用 css 过渡的高度。

我觉得有点奇怪，我无法为这个据称简单且经常使用的任务找到防弹插件。但也许我只是错过了一些东西。也许我在谷歌上搜索了错误的术语。这东西正式叫什么？切换展开？阅读更多-阅读更少？显示更多？

什么被认为是最好的方法？ 有没有办法解决所有这些问题？

谢谢你的时间

Answer 1

我认为

最好的方法是，如果你想要所有客户端，就是用包装器div 包装你的文本。

<div class="article">
  <div class="text short">
      Long Text
  </div>
  <span class="read-more">read more</span>

.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"(;
            }            还            {                $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上看起来不错

编辑
使用 jQuery 添加省略号。

在JS小提琴上看到