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

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

});

它来自stackoverflow上的这篇文章:

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

问题是它只从带有 .text 的段落中获取纯文本，但是如果我想用它的 html 元素(如链接、粗体类型和其他东西) chop 文本怎么办。我尝试添加第二个变量来选择带有元素的文本:

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

并将其添加到 slice 函数中:

$(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 个字 rune 本与 100 个字 rune 本与元素)

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

此致

最佳答案

HTML5 提供了 text-overflow: 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 插件您只能通过计算字符来 chop ，使用 CSS 您可以通过可用空间来 chop !

future 阅读:With CSS, use “…” for overflowed block of multi-lines

关于javascript - 使用链接 chop html中的文本以显示更多/更少并将元素保留在里面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28334540/