如何将宽于 50 像素的字符串的一部分替换为“..".

How can I replace part of a string which is wider than 50 px with "..."?

本文关键字：替换 quot 一部分 字符串 像素      更新时间：2023-09-26

>我正在寻找一个函数，该函数用"..."替换宽于 50px 的字符串的一部分。我想在Javascript/jQuery中实现它。

例：

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

知道伙计们吗？

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

如果要截断视觉对象并且实际上不需要截断实际字符串，下面是一个解决方案：

<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;

这不能像您希望的那样容易推断。因为一个字符或一组字符将占用多少宽度将取决于字体大小。计算文本宽度几乎不准确。

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

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

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

我会将字符串拆分成一个数组，然后添加一个字母一个字母来测试元素的宽度，以了解它是否小于 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;
    }
}
​
相关文章：