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

Question

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

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

我的设计取决于这个标题不超过给定的长度。 （约45个字符）。该插件提供了一个选项，用于在这个问题的标题后添加一个elipsis（我将它设置为45个字符）。问题是，当标题少于45个字符时，elipses仍然显示。

所以，我已经关闭了功能，并试图在jQuery中做到这一点。我只想在标题裁剪为45个字符的情况下添加elipsis。我试过这个，但它不起作用。

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

解决方案

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 2

你需要剪切文本的部分关闭，然后应用省略号，就像这样：

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

FIDDLE

Answer 3

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

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

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

Answer 4

我创作的一个插件，这是否（以及更多！）ellipsify调用。

你会使用这样的：

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

https://github.com/ethagnawl/ellipsify