4

我正在寻找一个函数，它用"...". 我想在 Javascript/jQuery 中实现它。

例子：

  • 假设我有一个变量var="Theta Saving Non-Qualified Plan";，我想限制字符串的长度（基于像素宽度）。如果字符串的长度超过 50px，则字符串中从第 51 个像素到字符串末尾的部分将被替换为"...".

有什么想法吗？

4

5 回答 5

2

不要试图重新发明轮子。使用这样的 Jquery 插件：http: //tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

于 2012-05-27T07:47:36.167 回答
1

如果您想截断视觉并且不需要截断实际字符串，这是一个解决方案：

<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;
于 2012-05-27T10:20:21.157 回答
0

这不能像您希望的那样简单地推断出来。因为一个字符或一组字符的宽度取决于字体大小。并且计算文本宽度几乎不准确。

因此，最好创建对字符而不是宽度友好的界面。

var t = $("#div").text();
if(t.length > 50) {
    $("#div").text(t.substr(0,50)+"...");
}
于 2012-05-27T06:44:34.243 回答
0

如果你的文本已经包含在一个宽度为 50px 的块元素中，你可以使用几乎所有浏览器都广泛支持的text-overflow CSS 规则。另请参阅quirksmode 的文本溢出。

于 2012-05-27T10:27:26.220 回答
0

我会将字符串拆分为一个数组，然后在一个字母后添加一个字母来测试元素的宽度以知道它是否低于 50px

IE ：

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;

    }

}
​
于 2012-05-27T06:55:09.923 回答