使用链接截断html中的文本以显示更多/更少并将元素保留在里面

Truncate text in html with link to show more / less and keep elements inside

本文关键字：在里面 保留 元素 显示 链接 html 文本      更新时间：2023-09-26

我在这里找到了这个小提琴，用于截断 html 中的文本@iambriansreed

http://jsfiddle.net/iambriansreed/bjdSF/

<p class="minimize">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
jQuery(function(){
    var minimized_elements = $('p.minimize');
    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < 100) return;
        $(this).html(
            t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'
        );
    }); 
    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });
    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });
});

它来自堆栈溢出的这篇文章：

截断段落前 100 个字符并隐藏段落的其余内容以显示/隐藏与更多/更少链接连接的其余内容

问题是它只从带有 .text 的段落中获取纯文本，但如果我想用链接、粗体等 html 元素截断文本怎么办。我尝试添加第二个变量来选择带有元素的文本：

var h = $(this).html();

并将其添加到切片函数中：

$(this).html(
        t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
        '<span style="display:none;">'+ h.slice(100,h.length)+' <a href="#" class="less">Less</a></span>'
);

它有点工作，但有时我会得到双倍或剪切的单词，因为它不计数（100 个字符的文本与 100 个字符的元素文本）

所以那篇帖子已经有 2 年的历史了，我想知道是否有任何插件或解决方案可以解决我的问题。

此致敬意

HTML5 提供了 text-overflow: ellipsis; 属性。

当文本溢出其包含元素时追加省略号 -资料来源：http://caniuse.com/#search=ellipsis

所有主要浏览器都支持它。

有了这个，您只需在容器上切换类，它就不会溢出空间。

 $(function() {
   $('div').click(function() {
     $(this).toggleClass('crop');
   });
 });
    #test {
      background: #eee;
      border: 1px dotted #ccc;
      margin: 1em;
    }
    .crop {
      white-space: nowrap;
      width: 12em;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 400px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="crop">Lorem Ipsum is simply <a href="orf.at">dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
  book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>

在我看来，这是解决您问题的更好解决方案，因为按字符计数仍然会破坏您的布局，因为不同的字符具有不同的大小。但是，使用 JS 插件，您只能通过计算字符来截断，使用 CSS，您可以按可用空间截断！

未来阅读：使用 CSS，使用"..."用于多行的溢出块

我最近遇到了同样的问题，需要一个可以在 DOM 之外工作的解决方案。我知道有一些库可以解决这个问题，但它们都通过正则表达式黑客工作，因此无法安全地处理所有有效的 HTML。

所以我做了一个HTML感知的剪辑方法：https://github.com/arendjr/text-clipper

我准备了一个解决方案，不仅可以修剪更复杂的文本，而且对于拼接/隐藏表格或元素列表中的记录也很有用。

使用非常微不足道，而且非常轻巧 3.2KB 为此没有依赖项，即使在IE10中也可以工作

我们所要做的就是在 html 中添加一些元素

数据类型我们有三种类型，之后它将被隐藏[文本，列表或表格]
要隐藏文本、行或列表元素的字符数后的数据编号
data-在此参数之后允许您设置显示/隐藏链接后应包含多少文本/元素/行

document.addEventListener('DOMContentLoaded', function() {
  // text, table, list, elelemnts
  new ShowMore('.your-class', {
    type: 'span', // [div, li, a, ...] parameter not required
    more: ' → show more', // text before expanding 
    less: ' ← less' // expanded text
  });
});
<div class="your-class" data-type="text" data-number="80" data-after="30">
  Lorem ipsum, dolor ...
  ...
</div>

此外，当您在展开后要缩短的文本只有几个字母时，也有安全性:)

该库位于 github show-more 和 examlpe show-more-examlpe 上

相关文章：