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

Question

我在这里找到这个 fiddle 用于从 @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();    
    });

});

来自 Whosebug 上的post：

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 个字符的带元素的文本）

所以 post 已经 2 岁了，我想知道是否有任何插件或解决方案可以解决我的问题。

此致

Answer 1

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

Append ellipsis when text overflows its containing element -Source: http://caniuse.com/#search=ellipsis

所有主流浏览器都支持。

有了这个你就可以在容器上切换class，它不会溢出space。

 $(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 你可以通过可用的 space!

来截断

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

Answer 2

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

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

Answer 3

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

使用非常简单，也很轻 3.2KB 没有依赖性，即使在 IE10 中也能工作

我们所要做的就是向 html

添加一些元素

data-type 我们有三种类型，之后它将被隐藏 [text, list or table]
data-number隐藏文本、行或列表元素的字符数后
data-after 这个参数可以让你设置多少 text/elements/rows 应该在 show/hide link

之后

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 and an examlpe show-more-examlpe

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

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

html

javascript

css

jquery

truncate