2

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

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

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

所以，我已经关闭了这个功能，并试图在 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，因此可能很难理解幕后发生的事情。

4

4 回答 4

3

你试过使用text-overflow: ellipsis;吗？

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

我在chrome上试了一下，没有发现任何问题！

在此处输入图像描述

于 2013-03-04T03:17:33.083 回答
1

解决方案

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

Working example

解释

首先是 API 使用错误。使用text()方法而不是方法val()来获得您需要的东西。那是：

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

代替

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

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

此外，附加 HTML 实体&hellip;（而不是三个点），因为它是您要查找的正确字符。

我还注意到你根本没有修剪，我不知道是不是因为这只是一个例子。在任何情况下，你都必须像我上面提到的那样来修剪你的文本。

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

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

于 2013-03-04T02:38:06.020 回答
0

我编写了一个插件来完成这个（以及更多！），称为 ellipsify。

你会这样使用它：

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

https://github.com/ethagnawl/ellipsify

于 2013-03-04T03:33:53.167 回答
0

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

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

小提琴

于 2013-03-04T02:47:40.310 回答