通常情况下显示截断文本，当鼠标悬停时显示完整文本

Question

我有一个包含段落文本的 div，我希望它在正常情况下只显示前几个单词，但是在鼠标悬停时展开并显示全部文本。理想情况下，我希望只使用 CSS 实现，而且不需要复制数据。

这是我尝试过的方法：

    <style>
    #data {
    border: solid 2px blue;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    #data:hover{
    overflow: visible; 
    white-space: normal; 

    }
    </style>

    <div>1: ONE</div>
    <div id="data" style="border: 1px solid #0ff; ">
    2: oianset osietnoasiedj oino aosietnoin oasiento oaseitnoind oisentoasintoon         oisentoiansetoino oiasentoin oi asetin doinae oidnoajosi doinalketn oiwdnota onioiante oaidno </div>
    <div>3: THREE</div>

（在线可用的网址为 http://jsfiddle.net/SEgun/）

我不想在文本扩展时移动div，只想让div 2扩展以显示覆盖div 3的全部文本。这个可能吗？我不关心支持晦涩的浏览器。

- naveed

Answer 1

下面的CSS将使div“覆盖”其下方的所有内容，因此不会推动任何内容向下。

position: absolute;
background-color:#FFF;

背景颜色很重要，因此您无法看到下面的内容。

为确保所有内容保持在相同位置，您可以给下一个元素设置与行高相同的顶部边距。 + 符号是 相邻兄弟 选择器。

div {
    line-height: 20px;
}
#data:hover+div {
    margin-top:20px;
}

演示

- sachleen

Answer 2

我认为这个可以起作用（在线可用：http://jsfiddle.net/KGqnj/）:

<style>
  #data {
    border: solid 2px blue;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #data:hover {
    overflow: visible;
    white-space: normal;
    width: auto;

  }

</style>

<div>1: ONE</div>
<div id="data" style="border: 1px solid #0ff; ">
  2: oianset osietnoasiedj oino aosietnoin oasiento oaseitnoind oisentoasintoon oisentoianset
oino oiasentoin oi asetin doinae oidnoajosi doinalketn oiwdnota onioiante oaidno </div>
<div>3: THREE</div>

- Arkadiusz 'flies' Rzadkowolski

---

它仍然移动其余的内容。 - naveed