如何用“......”替換寬度超過50像素的部分字符串？

Question

我正在尋找一個函數，用"..."替換寬度超過50px的字符串的一部分。 我想在Javascript / jQuery中實現它。

例：

• 假設我有一個變量var="Theta Saving Non-Qualified Plan"; 我想對字符串的長度施加限制（基於像素寬度）。 如果字符串的長度大於50px，則字符串中從第51個像素到字符串末尾的部分將替換為"..." 。

伙計們好嗎？

Answer 1

不要試圖重新發明輪子。 使用這樣的Jquery插件： http ： //tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

Answer 2

如果您想截斷視覺效果並且不需要截斷實際字符串，這是一個解決方案：

<p>
  <span style='width: 50px; height: 1em; 
        overflow: hidden; display: inline-block'>
  This is the long string which should appear truncated followed by elipses
  </span>
  <span>...</span>
</p>

為了使它在IE6和7中工作，我認為你需要添加以下CSS：

zoom: 1
*display: inline;

Answer 3

這不能像你希望的那樣容易推斷。 因為字符或字符集的寬度取決於字體大小。 並且計算文本寬度幾乎不准確 。

因此，您可以更好地創建界面，使其與字符而不是寬度保持友好。

var t = $("#div").text();
if(t.length > 50) {
    $("#div").text(t.substr(0,50)+"...");
} 

Answer 4

我會將字符串拆分成一個數組，然后在字母后面添加字母測試元素的寬度，以確定它是否低於50px

即：

var vElement = $('.your_element');

var vStr = vElement.html();

var vShortStr = "";

var vArray = vStr.split("");

for (var i=0; i<vArray.length; i++){

vShortStr += vArray[i];

vElement.html(vShortStr);

if(vElement.width() > 50){

    vShortStr = vShortStr.substring(0, vShortStr.length-1);

    vShortStr += "...";

    vElement.html(vShortStr);

    break;

    }

}
​

Answer 5

如果您的文本已經包含在寬度為50px的塊元素中，則可以使用文本溢出 CSS規則，幾乎所有瀏覽器都廣泛支持該規則。 另請參閱quirksmode上的文本溢出 。