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-part中跨度中的空白行为之前：

span { white-space: nowrap; }

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

Answer 2

使用

$(this).width();

或者您也可以使用

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

在你的函数中。如果你想要缩短文本长度，那么

$(this).text().length;

使用jQuery计算textpixel宽度

2 个答案: