Question

如何截断锚标记内的文本？

这

<a href=''>lorem ipsum</a>

到

<a href=''>lorem...</a>

最大长度 57个字符加上省略号。

Answer 1

在jQuery中可以使用text(function)。

var txtMax = 60;
$('a').text(function(_, txt){
  txt = $.trim(txt);
   return txt.length > txtMax ? txt.slice(0,txtMax -3)+'...' : txt;     
});

的 DEMO

Answer 2

为元素提供ID，然后（IE9 plus）：

var maxLength = 57,
    el = document.getElementById('short'),
    existing = el.textContent,
    replacement = existing.slice(0,maxLength) + '...';
el.textContent = replacement;

您也可以使用CSS：

#short {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

您需要检查浏览器支持。对于基于多字节字符的语言，第一种方法也不安全（如中文）。

退房：

http://jsfiddle.net/1ugurr7w/

Answer 3

你可以使用普通的CSS进行此操作！ HTML

<a href="http://www.google.com" class="truncate">Lorem Ipsum Dolor Foo Bar Baz Qux Quux Waffle</a>

CSS

.truncate {
  width: 100px; // for example
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

或

你可以使用js;这是我最喜欢的实现：

var $shortlink = $('a.truncate'); function trunc(str, n) { return str.substr(0,n-1)+'…' } var txt = $shortlink.text(t); $shortlink.html(trunc(txt, 40));

Answer 4

我使用此Feed

$(".news .widget-content").each(function(){var e=$(this).text();if(e.match("recent")){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results=10",type:"get",dataType:"jsonp",success:function(e){var t="";var n="<ul>";for(var r=0;r<e.feed.entry.length;r++){for(var i=0;i<e.feed.entry[r].link.length;i++){if(e.feed.entry[r].link[i].rel=="alternate"){t=e.feed.entry[r].link[i].href;break}}var s=e.feed.entry[r].title.$t;var o=e.feed.entry[r].category[0].term;n+='<li><a href="/search/label/'+o+'" class="post-tag">'+o+'</a><h3 class="recent-title"><a id="short" href="'+t+'">'+s+"</a></h3></li>"}n+="</ul>";$(".news .widget-content").each(function(){$(this).html(n);$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');$(this).removeClass("widget-content").addClass("layout-content");$(this).find("ul").newsTicker({row_height: 50, max_rows: 1, duration: 4000, prevButton: $('.but-left'), nextButton: $('.but-right') });$("p.trans").each(function(){var e=$(this).text();var t=$(this).attr("data-tran");$("#pages-wrapper *").replaceText(e,t)})})}})}else{$.ajax({url:"/feeds/posts/default/-/"+e+"?alt=json-in-script&max-results=10",type:"get",dataType:"jsonp",success:function(e){var t="";var n="<ul>";for(var r=0;r<e.feed.entry.length;r++){for(var i=0;i<e.feed.entry[r].link.length;i++){if(e.feed.entry[r].link[i].rel=="alternate"){t=e.feed.entry[r].link[i].href;break}}var s=e.feed.entry[r].title.$t;var o=e.feed.entry[r].category[0].term;n+='<li><a href="/search/label/'+o+'" class="post-tag">'+o+'</a><h3 class="recent-title"><a id="short" href="'+t+'">'+s+"</a></h3></li>"}n+="</ul>";$(".news .widget-content").each(function(){$(this).html(n);$(this).removeClass("widget-content").addClass("layout-content");$(this).find("ul").newsTicker({ row_height: 50, max_rows: 1, duration: 4000, prevButton: $('.but-left'), nextButton: $('.but-right') });$("p.trans").each(function(){var e=$(this).text();var t=$(this).attr("data-tran");$("#pages-wrapper *").replaceText(e,t)})})}})}});

如何截断文字？

4 个答案: