缩短链接文字

Question

它可能非常简单，但我无法弄清楚我将如何做到这一点 我希望缩短一个链接，如果它超过30个字符添加...最后，并且可以像在亚马逊上一样看到悬停的完整链接。

我的功能不起作用

function shortenLink() {
    var string = $("div a").text();

    if (string.length > 30) {
        string.substring(0, 30);
        string.append('...')
    }
}

Answer 1

使用jquery尝试：

$("div a").each(function(i,v){
    $(v).attr('title',$(v).text());
    if($(v).text().length > 30){
        var str = $(v).text().substring(0,30) + "...";
        $(v).text(str);
    }
});

Answer 2

使用text-overflow: ellipsis;代替...

根据您的行要求

和-webkit-line-clamp: 3;。

希望这会有所帮助：）

例如......

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 300px;
  margin: 20px auto;
  font-family:arial;
}
.demo {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="wrapper">
  <p class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

Answer 3

substring返回一个新字符串 - 因此它不会更改当前字符串。 因此，在任何解决方案中，您都希望将文本重新分配给元素。

（使用$（elementQuery）.text（newValue））

更简单的解决方案

＆＃13;

＆＃13;

function shortenString(string,maxLength=30){
  return string.length >= maxLength? string.slice(0,maxLength-3) + '...' : string
}

// You can get this string using the $(<EL>).text() function.
console.log(shortenString('ssssssssssssssssssssssssssssssssssssssssssssssss'))
console.log(shortenString('ss'))

＆＃13;

＆＃13;

＆＃13;