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的块元素中，则可以使用text-overflow CSS规则，几乎所有浏览器都广泛支持该规则。另请参阅text-overflow at quirksmode。

如何用“......”替换宽度超过50像素的部分字符串？

5 个答案: