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计算span中的值，如果从父宽度开始大的值的宽度逐个删除并在最后一个句子中放入 ... ，直到值的宽度等于宽度父元素

也是我的朋友，我想把这句话放一行不多！请指导我......

Answer 1

你只需要设置父div的 width 和 height ，为此定义要知道的span的 line-height 正好是2行的高度。

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

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

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

Answer 2

试试这个

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

如何检查宽度跨度并在span中逐个删除

2 个答案: