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

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，因为它可以通过样式化和减少脚本执行来处理多个元素。