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

好吧，我花了一整天的时间试图找出正确的方法，但结果很简单，也许这里有人能给我指出正确的方向

问题: 我有一个关于班级文章内容的div。页面上将有大约2-10个这样的页面。它们中的每一个都包含所见即所得的输出。i、 e.包装在p标签、一些强标签、em标签甚至img标签中的文本

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

我看到了以下几种方法：

在x个字符后去掉div的内容并添加[…]+链接。这使得内容有点脆弱，因为它可以剥离结束标记，甚至剥离图像标记的中间部分，导致输出的html被破坏

更改内容元素的高度，并溢出：hidden；。这可能导致图像从盒子中溢出，部分图像在盒子中，甚至根据行高与内容高度将一行切成两半。这使得js非常依赖css

使用前x个字符创建新的内容元素，并在短版本和长版本上切换显示无/块。这将在标记中创建两个文本实例，我更喜欢这样。这也使得在元素扩展时，不可能利用css转换来获得高度

我觉得有点奇怪，我还没能找到一个防弹插件来完成这项被认为是简单的，并且被广泛使用的任务。但也许我只是错过了一些东西。也许我在谷歌上用错了词。这东西官方叫什么？切换扩展？多读少读？展示更多

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

---

感谢您抽出时间

我认为，如果您需要，最好的客户端方法是使用wrapper div包装文本

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

css如下所示：

$(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");
}
}); });

.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代码，您可以将字符、图像替换为您想要的任何内容

我为你创建了一个完整的工作示例，看起来不错

编辑 使用jquery添加省略号

---

请参见

我认为最好的方法是，如果您想在客户端使用它，那么所有的方法都是使用wrapper div包装文本

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

css如下所示：

$(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");
}
}); });

.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代码，您可以将字符、图像替换为您想要的任何内容

我为你创建了一个完整的工作示例，看起来不错

编辑 使用jquery添加省略号

---

---

请参见

您想自己实现还是与jquery插件一起使用？两者都可以。。如果有一个好的插件，那么我会非常高兴。但在我看来，我发现的那些都有问题。我自己写也没问题，但我觉得我遗漏了什么。最好的方法是什么？你可以试试这个插件，谢谢Dvir。如果它能够插入。。。在那里它打断了文本。但该插件只是将文本隐藏在溢出中。您想自己实现还是与jquery插件一起使用？两者都可以。。如果有一个好的插件，那么我会非常高兴。但在我看来，我发现的那些都有问题。我自己写也没问题，但我觉得我遗漏了什么。最好的方法是什么？你可以试试这个插件，谢谢Dvir。如果它能够插入。。。在那里它打断了文本。但是这个插件只是在overflow.Hi-Dvir中隐藏了文本。非常感谢你的工作。这似乎是唯一有效的方法。这就是我在问题中所说的第二种方法。您将如何添加。。。到简短版本的最后一行？请参见答案底部的“我的编辑”。现在您有了省略号，可以设置所需的文本大小。如果这个答案对你有帮助，我会很高兴，如果你能给这个答案打分并为我投票。嗨，Dvir。这似乎解决了问题。伙计，你很好。我甚至试图通过在截止点添加标签来打破它，比如和，但它没有打破。你是如何确保它不会留下打开的标签的？如果是ex，我在截止点前打开2个单词，然后在6个单词后关闭。它会在需要的地方切断，并自动关闭em标记。我无法从代码中看出你是如何做到这一点的。你能解释一下吗？但是谢谢你，我接受你的回答。我所见过的最好的解决方案。对不起，Dvir，但经过一些测试后，我注意到，如果在截止点附近使用富文本，它实际上会中断。对于像和这样的简单代码很好，因为html5似乎会自动结束它们，但是如果你坚持使用一个长的src，那么。。。消失了，我要找个解决办法。你希望发生什么？用一些文本替换图像？比如[…]？嗨，Dvir。非常感谢你的工作。这似乎是唯一的解决办法

---

作品这就是我在问题中所说的第二种方法。您将如何添加。。。到简短版本的最后一行？请参见答案底部的“我的编辑”。现在您有了省略号，可以设置所需的文本大小。如果这个答案对你有帮助，我会很高兴，如果你能给这个答案打分并为我投票。嗨，Dvir。这似乎解决了问题。伙计，你很好。我甚至试图通过在截止点添加标签来打破它，比如和，但它没有打破。你是如何确保它不会留下打开的标签的？如果是ex，我在截止点前打开2个单词，然后在6个单词后关闭。它会在需要的地方切断，并自动关闭em标记。我无法从代码中看出你是如何做到这一点的。你能解释一下吗？但是谢谢你，我接受你的回答。我所见过的最好的解决方案。对不起，Dvir，但经过一些测试后，我注意到，如果在截止点附近使用富文本，它实际上会中断。对于像和这样的简单代码很好，因为html5似乎会自动结束它们，但是如果你坚持使用一个长的src，那么。。。消失了，我要找个解决办法。你希望发生什么？用一些文本替换图像？比如[…]？