Question

我在这里找到了这个小提琴，用于截断来自@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();    
    });

});

这篇帖子来自stackoverflow：

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岁，我想知道是否有任何插件或解决方案来解决我的问题。

最好的问候

Answer 1

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

当文本溢出其包含的元素时附加省略号 -Source：http://caniuse.com/#search=ellipsis

所有主流浏览器均支持。

这样你就可以在容器上切换类，它不会溢出空间。

＆＃13;

 $(function() {
   $('div').click(function() {
     $(this).toggleClass('crop');
   });
 });

＆＃13;

    #test {
      background: #eee;
      border: 1px dotted #ccc;
      margin: 1em;
    }
    .crop {
      white-space: nowrap;
      width: 12em;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 400px;
    }

＆＃13;

<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>

＆＃13;

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

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

Answer 2

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

所以我制作了一个支持HTML的裁剪方法：https://github.com/arendjr/text-clipper

Answer 3

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

使用非常简单，而且也很轻3.2KB，因为它没有依赖关系，即使在IE10中也可以使用

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

数据类型，我们有三种类型的数据将被隐藏[文本，列表或表格]
隐藏文字，行或列表元素的字符数后的数据编号
数据后：此参数可让您设置显示/隐藏链接后的文本/元素/行数

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

上

在html中截断文本，链接显示更多/更少，并保留元素

3 个答案: