如何将字符串缩短为。。。使用jquery？

当字符串的名称大于某个限制时，将出现三个点，该限制是通过计算可以修改的字符来定义的

将最后3个字符替换为

…

。e、 g.假设我的名字有

30个

字符，但屏幕标签字段只能使用15个字符，而不是使用第一个

12个

字符，并将13、14和15个字符替换为

…

---

将鼠标悬停在带有…的标签上方，显示完整名称（即30个字符）

---

我如何在jquery中实现这一点？或者html，这不需要jQuery

var str = "whatever here"
var shortened = str.length > 15 ? str.substring(0,12) + '...' : str;

---

这不需要jQuery

var str = "whatever here"
var shortened = str.length > 15 ? str.substring(0,12) + '...' : str;

---

您可以使用css而不是任何javascript来处理它。css中有

文本溢出

，用于在字符串超过宽度时产生

…

效果。如果要显示原始文本，可以在css中添加

：hover

，以删除溢出边界

另一种方法是使用javascript计算内容长度，并使用省略号修改内容。此外，如果要显示原始文本，请使用

hover（）

，但必须先存储原始文本

因此，有两种解决方案，请查看以下详细信息：

CSS

HTML

我是非常长的字符串

---

就个人而言，我建议使用CSS而不是JavaScript，因为它可以通过样式化和减少脚本执行来处理多个元素。

您可以使用CSS而不是任何JavaScript来处理它。css中有

文本溢出

，用于在字符串超过宽度时产生

…

效果。如果要显示原始文本，可以在css中添加

：hover

，以删除溢出边界

另一种方法是使用javascript计算内容长度，并使用省略号修改内容。此外，如果要显示原始文本，请使用

hover（）

，但必须先存储原始文本

因此，有两种解决方案，请查看以下详细信息：

CSS

HTML

我是非常长的字符串

就我个人而言，我建议使用CSS而不是JavaScript，因为它可以通过设置样式和减少脚本执行来处理多个元素。

如果您只是尝试根据元素大小“调整”，您可能需要尝试

文本溢出


如果您只是尝试根据元素大小“调整”，您可能需要尝试
文本溢出


假设您的内容位于id为“content”的div中，并且您的字符串保存在longString变量中

$(document).ready(function() {
    var contentDiv = $("#content");
    contentDiv.html(longString.substr(0,12) + "...");

    contentDiv.mouseover(function(){ 
         this.html(longString);
    });

    contentDiv.mouseout(function(){
         this.html(longString.substr(0,12) + "...");
    });
});

这是未经测试的，但它应该为您提供所需的显示和隐藏功能。它还假定字符串始终至少为12个字符。如果需要进行错误检查，您可以轻松添加它。
假设您的内容位于id为“content”的div中，并且您的字符串保存在longString变量中

$(document).ready(function() {
    var contentDiv = $("#content");
    contentDiv.html(longString.substr(0,12) + "...");

    contentDiv.mouseover(function(){ 
         this.html(longString);
    });

    contentDiv.mouseout(function(){
         this.html(longString.substr(0,12) + "...");
    });
});

这是未经测试的，但它应该为您提供所需的显示和隐藏功能。它还假定字符串始终至少为12个字符。如果需要进行错误检查，可以轻松添加。
字符串来自何处？相关的HTML当前是什么样子的？嗯≠ IIIIII——换句话说，计数字符不是确定字符串像素宽度的好方法。@josh3736-解决方案：使用Comic Sans*runs*可能是@Jamiec的副本给我半个答案：）字符串来自哪里？相关的HTML当前是什么样子的？嗯≠ IIIIII——换句话说，计数字符不是确定字符串像素宽度的好方法。@josh3736-解决方案：使用Comic Sans*runs*可能是@Jamiec的副本给我半个答案：）将鼠标放在标签上，并…显示完整的名称（即30个字符）@NestorC如果您想用完整的文本显示标签，我已经更新了我的答案。检查一下。鼠标移到标签上，用…显示完整的名称（即30个字符）@NestorC如果你想用完整的文本显示标签，我已经更新了我的答案。检查它。CSS解决方案是完美的-简单、灵活、更精确（考虑像素大小而不仅仅是计数字符）。CSS解决方案是完美的-简单、灵活、更精确（考虑像素大小而不仅仅是计数字符）。
<div id="abc">I am very long string</div>

$(document).ready(function() {
    var contentDiv = $("#content");
    contentDiv.html(longString.substr(0,12) + "...");

    contentDiv.mouseover(function(){ 
         this.html(longString);
    });

    contentDiv.mouseout(function(){
         this.html(longString.substr(0,12) + "...");
    });
});