jquery - 如何检查宽度跨度并在跨度中一一删除

Question

我有这个代码：

<div id="new-massege">
    <div class="bs">
        <div id="text-part">
            <div id="text-messege">
                <span>hello my friend how r you ???? I miss you honey</span>
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/Gkn5j/

我想用 jQuery 计算跨度中的值，如果值的宽度比父宽度更大，则一个接一个地删除一个字母并将...放在最后一句，直到值的跨度宽度等于宽度父元素。

还有我的朋友我要这句话放一行不要多！！！请指导我...

Answer 1

尝试这个

#text-messege {
    position: relative;
    padding: 10px;
}
span {
    display: block;
    font: 14px koodak, tahoma, arial;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

http://jsfiddle.net/creativevilla/Eq6gR/1/

同样对于多行，您可以参考http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Answer 2

您只需要设置父 div 的宽度和高度，因为它定义了跨度的line-height以准确知道 2 行的高度。

在溢出之后：隐藏完成工作。

#text-messege{
    width: 100px;
    height: 40px;
    overflow: hidden;
}

#text-messege span{
    line-height: 20px;
}