如果文本太长，则用省略号填充文本

Question

我正在尝试解决jQuery问题。我正在使用wordpress插件，从最近的帖子创建一个小部件。该插件自动生成一些代码，我试图用CSS和jQuery格式化/破解。其中一个自动生成的项目是标题：

<h4 class="srp-post-tilte">HEADLINE HERE</H4>

我的设计取决于此标题不超过给定长度。 （约45个字符）。该插件提供了一个选项，可以在标题之后添加省略号（我将其设置为45个字符）。问题是，当标题低于45个字符时，elip仍然显示出来。

所以，我已经关闭了这个功能，并试图在jQuery中完成它。我只想在标题被裁剪为45个字符的情况下添加省略号。我尝试过这个，但它不起作用。

if ($j("h4.srp-post-title").val().length > 44) { 
         // Show the elipsis
            $j('h4.srp-post-title').append("...");
} else {
         // Don's show the elipsis (do nothing)
        $j('h4.srp-post-title').append("");
}

如果有人可以提供帮助，我们将非常感激。你可以在http://dreamlets.sfplanning.org/看到一个实例，但要预先警告，其中有很多CSS，所以解读幕后发生的事情可能很棘手。

Answer 1

您是否尝试过使用text-overflow: ellipsis;？

.srp-post-tilte {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我在chrome上尝试它，我没有看到任何问题！

Answer 2

解决方案

var header = $('h4.srp-post-title').text();
if( $('h4.srp-post-title').text().length > 45 )
    $('h4.srp-post-title').html(header.substring(0,45) + '…');

Working example

---

释

首先是API使用错误。使用text()方法代替val()方法来获取所需内容。那就是：

$j("h4.srp-post-title").text().length

而不是

$j("h4.srp-post-title").val().length

val()只获取元素的value属性，主要用于从input字段中获取值。

此外，附加HTML实体… （而不是三个点），因为它是您正在寻找的正确字符。

我也注意到你根本没有修剪，我不知道是不是因为它只是一个例子。在任何情况下，你都必须做我上面提到的修剪你的文字。

基本上你要做的是检查标题是否超过45个字符，然后使用substring字符串方法获取前45个字符并添加省略号。瞧。

---

顺便说一下，修改插件的工作方式可能是一个更好的选择，它不应该那么困难。最后，你的选择。

Answer 3

您需要删除部分文本，然后应用省略号，如下所示：

$j("h4.srp-post-title").text(function(i, txt) {
    return txt.substring(0,42) + (txt.length > 45 ? '...' : '');
});

FIDDLE

Answer 4

我创作了一个插件来执行此操作（以及更多！），称为ellipsify。

你会这样使用它：

$j("h4.srp-post-title").ellipsify({
    count: 45
});

https://github.com/ethagnawl/ellipsify