用省略號填充文本，如果它太長

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