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

这可以通过pure 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;
}

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

2 个答案: