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

Posted 2023-04-12

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

【英文标题】：Truncate text in html with link to show more / less and keep elements inside

【发布时间】：2015-04-04 18:02:42

【问题描述】：

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

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();    
    );

);

它来自***上的这篇文章：

Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link

问题是它只从带有 .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 年了，我想知道是否有任何插件或解决方案可以解决我的问题。

最好的问候

【问题讨论】：

您可能需要遍历 DOM 节点并查看每个节点中的文本（如果有）。见***.com/questions/298750/…

这是一个你可以试试的插件：github.com/pathable/truncate

【参考方案1】：

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 则可以通过可用空间来截断！

未来阅读：With CSS, use “…” for overflowed block of multi-lines

【讨论】：

这将有助于定义宽度，但不适用于特定字符集。

【参考方案2】：

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

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

【参考方案3】：

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

使用很简单，也很轻 3.2KB 没有依赖关系，即使在 IE10 中也可以使用

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

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

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 和一个示例 show-more-examlpe