1

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

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

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

我见过以下方法：

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

  2. 更改内容元素的高度，然后溢出：隐藏；。这可能会导致图像溢出盒子 - 部分内容在里面，甚至根据行高与内容高度将一条线切成两半。这使得 js 非常依赖 CSS。

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

我觉得有点奇怪，我还没有找到一个防弹插件来完成这个据说很简单 - 并且经常使用 - 的任务。但也许我只是错过了一些东西。也许我用谷歌搜索了错误的条款。这东西正式叫什么？切换 展开？多读少读？显示更多？

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

感谢您的时间

4

1 回答 1

4

我认为最好的方法是，如果你想要它所有的客户端是用包装器 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编辑
添加省略号。

见jsFiddle

于 2013-10-04T11:45:09.367 回答