如果文本扩展一定宽度,则自动添加"...",但在悬停时显示？

Question

我正在尝试执行以下操作,具有<div>一定的宽度,可以说,30%而不是1行文本,但是我想显示...文本是否很长,也会<div>改变宽度,因为它是响应设计,所以...应该相应调整.但是如果一个人盘旋在它上面<div>,它应该扩展它的宽度(它将被绝对定位,因此允许走出某些边界.)并在同一行显示所有文本.

例:

This is text that fits

This is text that doesn't fit inside ...

This is text that doesn't fit inside, but is visible on hover.

不确定是否可以使用纯粹的HTML和CSS跨浏览器工作,也许一些溢出隐藏备份？或者JQuery,如果用其他任何东西都无法实现.

Answer 1

纯CSS可以实现这一点:

#test {
    width: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#test:hover {
    overflow: visible;
}

http://jsfiddle.net/qyNUG/

Answer 2

这是基于像素宽度的css3版本.如果你有一个特定大小的容器,你可以在这个文本中使用,那么你可以使用宽度:100%; 在其中工作.

的jsfiddle

<p>This is text that doesn't fit inside, but is visible on hover.</p>


p {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
p:hover {
    max-width: none;
}