jquery - 如果文本扩展一定宽度，则自动添加“...”，但在悬停时显示？

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 版本。如果您有一个特定大小的容器，您希望此文本可以在其中工作，那么您可以使用 width: 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;
}