CSS 正常显示截断的文本，但在悬停时显示全文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11477854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show truncated text normally, but show full text on hover
提问by naveed
I have a div with a paragraph or so of text inside it. I'd like it to show the first few words normally, but expand to show the full text on hover. Ideally, I'd like to do it with only CSS and without data duplication.
我有一个 div，里面有一段左右的文字。我希望它正常显示前几个单词，但扩展以在悬停时显示全文。理想情况下，我想只用 CSS 来做，没有数据重复。
This is what I've tried: http://jsfiddle.net/SEgun/
这是我试过的：http: //jsfiddle.net/SEgun/
I don't want the divs to move when the text expands, only for div 2 to expand to show the full text covering div 3. Is this possible? P.S. I don't care about retarded browsers.
我不希望 div 在文本展开时移动，只让 div 2 展开以显示覆盖 div 3 的全文。这可能吗？PS 我不在乎弱智的浏览器。
回答by sachleen
The CSS below will cause the div to "cover" everything below it so it doesn't push any content down.
下面的 CSS 将导致 div“覆盖”它下面的所有内容，因此它不会向下推任何内容。
position: absolute;
background-color:#FFF;
The background color is important so you can't see the stuff below.
背景颜色很重要，因此您看不到下面的内容。
To make sure everything stays in the same place, you can give the next element a top margin of the same value as the line height. The +sign is the adjacent siblingselector.
为了确保所有内容都保持在同一位置，您可以为下一个元素设置与行高相同值的上边距。该+标志是相邻的兄弟选择器。
div {
line-height: 20px;
}
#data:hover+div {
margin-top:20px;
}
回答by Arkadiusz 'flies' Rzadkowolski
What about this: http://jsfiddle.net/KGqnj/
这个怎么样：http: //jsfiddle.net/KGqnj/
