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/​

Answer 1

$(this).width();

使用上面的代码，您将获得跨度的宽度，但在此之前您必须在 css 部分中更改跨度中空格的行为:

span { white-space: nowrap; }

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