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

Question

我正在尝试解决一个 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，因此要破译幕后发生的事情可能很棘手。

Answer 1

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

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

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