如果文本长度增加jquery，则隐藏溢出

Question

第一手见fiddle！

我所拥有的是一个带字符串的div。现在每当hover .dots bolder，length内的文字会增加其size或overflow:hidden。我希望类似于文字大小增加然后它不应该像3 dots那样消失，但显示后面跟dots。例如，看看这个图像........

由于名称太长，因此显示{{1}}。我怎么可能这样做？

Answer 1

尝试text-overflow:ellipsis;和white-space:nowrap

.dots {
 height:20px;
 width:150px;
 background:#fff;
 border:1px solid #DDD;
 color:#333;
 text-overflow:ellipsis;
 overflow:hidden;
 padding:2px;
 white-space: nowrap;
}

演示：http://jsfiddle.net/lotusgodkk/K655K/1/

Answer 2

将此添加到您的css类：

    .dots {
          .....
        overflow:hidden;
        padding:2px;
        text-overflow: ellipsis; // required
        white-space: nowrap; // required
    }

Answer 3

这是一个非常简单的解决方案。 只需将其添加到您的.dots css：

white-space: nowrap;
text-overflow: ellipsis;

所以你的css看起来像这样：

.dots {
    height:20px;
    width:150px;
    background:#fff;
    border:1px solid #DDD;
    color:#333;
    overflow:hidden;
    padding:2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

请参阅我制作的fiddle。