Question

当字符串的名称大于限制时，将出现三个点，限制是通过计算可以

的字符来定义的。

用…替换最后3个字符。例如假设我的名字有30个字符，但屏幕标签字段只能使用15个字符而不是第一个12个字符，并用…替换13,14和15个字符

鼠标悬停在此标签上...显示完整名称（即30个字符）

我怎么能在jquery中实现这一点？或者html

Answer 1

您可以使用css而不是使用任何javascript来处理它。当字符串超出宽度时，css中有text-overflow用于产生效果...。如果要显示原始文本，可以在css中添加:hover以删除溢出边界。

另一种方法是使用javascript计算内容长度并使用省略号修改内容。另外，如果要显示原始文本，请使用hover()，但必须先存储原始文本。

因此，有两种解决方案，请查看详细信息：http://jsfiddle.net/zqfhx/1/

CSS

<style type="text/css">
.w100C {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    width: 100px;
    min-width: 0;
}

.w100C:hover {  
    overflow: none;
    width: auto;
}
</style>

HTML

<div class="w100C">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever s
</div>

使用Javascript（jQuery）的替代方法

的JavaScript

$(document).ready(function() {

    function TruncateText(text)
    {
        if(text.length > 12)
        {
             text = txt.substring(0,12) + "...";
        }
        return text;
    }

    var txt = $("#abc").text();
    $("#abc").attr("orgTxt", txt);
    txt = TruncateText(txt);
    $("#abc").text(txt);

    $("#abc").hover(function(){
        var t = $("#abc").attr("orgTxt");
        $("#abc").text(t);
    }, function(){
        var t =  $("#abc").text();
        t = TruncateText(t);
        $("#abc").text(t);
    });    
});

HTML

<div id="abc">I am very long string</div>

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

Answer 2

这不需要jQuery

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

Answer 3

如果您只是想根据元素大小“适应”，可能需要尝试text-overflow。

JSFiddle for illustrative purposes

Moz Docs for text-overflow

Answer 4

假设您的内容位于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个字符。如果需要进行错误检查，您可以轻松添加。

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

4 个答案: