jquery - 使用 jQuery 计算文本像素宽度

Question

我想在我的菜单中添加一个简单的工具提示。如何计算工具提示中的文本有多少像素？

HTML：

<nav>
    <ul>
        <li>
            <a href="#" title="Item 1 text">Item 1</a>
        </li>
        <li>
            <a href="#" title="Item 2  longer text" >Item 2</a>
        </li>
        <li>
            <a href="#" title="Item 3 text text text">Item 3</a>
        </li>
    </ul>
</nav>

CSS：

nav{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    height:30px;
    background: grey;
}
ul{
    width: 300px;
    margin:0 auto;
}
li{
    float:left;
    position:relative;
}
span{
    position:absolute;
    left: 50%;
    bottom: 30px;
    background:black;
    border: solid 1px grey;
    border-bottom:none;
    display:none;
    color:white;
}
li:hover span{
    display:block;
}
a{
    display:block;
    text-decoration:none;
    color: white;
    line-height: 30px;
    padding: 0 10px;

}​

jQuery：

$(document).ready(function(){
    $('nav li').each(function(){
        $(this).append('<span>'+$(this).find('a').attr('title')+'</span>');
    });
    $('nav li span').each(function(){
        // var textwidth = ???? 
        // $('nav li span').css("left",-textwidth/2);
        // $('nav li span').css("width",textwidth);
    });
});

演示： http:
//jsfiddle.net/vxUTZ/1/ ​</p>

Answer 1

$(this).width();

使用上面的代码，您将获得跨度的宽度，但在您必须在 css-part 中更改跨度中的空白行为之前：

span { white-space: nowrap; }

有了这个，每个空格后不会有换行符，计算出的宽度就是文本的宽度

Answer 2

采用

$(this).width();

或者你也可以使用

$(this).attr("width");

在你的函数中。如果你想调整你的文本长度然后

$(this).text().length;