Html 使用 CSS 省略号在悬停时显示截断的文本会重叠其下方的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34833815/
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
Showing truncated text on hover using CSS ellipsis overlaps text below it
提问by Nakib
I have a nametag in the sidebar which should display single line and truncate if long text follow by triple dots (lorem ipsum...) and should show full text on hover.
我name在侧边栏中有一个标签，如果长文本后跟三个点（lorem ipsum ...），它应该显示单行并截断，并且应该在悬停时显示全文。
I am able to achieve this using css but my problem is when full text is displayed it overlaps the text below it. (Images attached)
我可以使用 css 来实现这一点，但我的问题是当显示全文时，它会与下面的文本重叠。（附图片）
HTML
HTML
<p class="name">
Lorem ipsum lorem ipsum lorem ipsum
</p>
CSS
CSS
.name{
color: #0079c1;
height: 2em;
line-height: 1em;
font-size: 20px;
font-weight: 400;
text-overflow: ellipsis;
margin-bottom: 12px;
cursor: pointer;
word-break: break-all;
overflow:hidden;
white-space: nowrap;
}
.name:hover{
overflow: visible;
white-space: normal;
}
Here is a JSFiddle
这是一个JSFiddle
Text overlapping on hover. Expected behaviour is it should push the content below it.
悬停时文本重叠。预期的行为是它应该推送它下面的内容。
回答by Mi-Creativity
You can just add height:autoto the hoverstate and it'll work just fine:
您可以添加height:auto到hover状态，它会工作得很好：
.name{
width:120px;
color: #0079c1;
height: 2em;
line-height: 1em;
font-size: 20px;
font-weight: 400;
text-overflow: ellipsis;
margin-bottom: 12px;
cursor: pointer;
word-break: break-all;
overflow:hidden;
white-space: nowrap;
}
.name:hover{
overflow: visible;
white-space: normal;
height:auto; /* just added this line */
}<p class="name">
Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum
</p>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptate deserunt consequatur velit, alias ullam fuga aspernatur, ut doloremque eos fugiat quo a accusamus minus distinctio quasi, recusandae excepturi molestiae.
</span>回答by Natalia
Facing similar problem with some long email addresses in a form I created this solution where the full content is displayed on hover in a tooltip-style pseudo element.
面对表单中一些长电子邮件地址的类似问题，我创建了这个解决方案，其中完整内容显示在工具提示样式的伪元素中。
body{
background:#eee;
}
.box{
background:#fff;
box-shadow: 0 25px 30px 0 rgba(0,0,0,0.15);
border:rgba(0,0,0,0.3);
width:10rem;
margin:2rem auto;
padding:2rem;
}
.ellipsis {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all .2s linear;
white-space: nowrap;
padding:.5rem 1rem;
}
.ellipsis:focus, .ellipsis:hover {
color:transparent;
}
.ellipsis:focus:after,.ellipsis:hover:after{
content:attr(data-text);
overflow: visible;
text-overflow: inherit;
background: #fff;
position: absolute;
left:auto;
top:auto;
width: auto;
max-width: 20rem;
border: 1px solid #eaebec;
padding: 0 .5rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.28);
white-space: normal;
word-wrap: break-word;
display:block;
color:black;
margin-top:-1.25rem;
}<div class="box">
<p class='ellipsis' data-text='f6cd8edc-60c2-11e7-9919-ef706e78474f'>f6cd8edc-60c2-11e7-9919-ef706e78474f</p>
<p class='ellipsis' data-text='Mauris ac eros odio. Etiam imperdiet vitae dolor eu feugiat. Pellentesque at ante dignissim, tincidunt ipsum quis, rutrum ante. Donec ac lorem nisl. Cras fringilla ex ut rutrum imperdiet. Fusce accumsan id est vel lacinia. Cras nec ligula eu velit mattis mollis. Nunc venenatis neque nibh, id dapibus orci aliquet id. Ut dictum mollis eros sed imperdiet. Phasellus quis enim nec felis sagittis varius. Ut et rutrum quam. Morbi id interdum felis. Mauris id dignissim odio.'>Mauris ac eros odio. Etiam imperdiet vitae dolor eu feugiat. Pellentesque at ante dignissim, tincidunt ipsum quis, rutrum ante. Donec ac lorem nisl. Cras fringilla ex ut rutrum imperdiet. Fusce accumsan id est vel lacinia. Cras nec ligula eu velit mattis mollis. Nunc venenatis neque nibh, id dapibus orci aliquet id. Ut dictum mollis eros sed imperdiet. Phasellus quis enim nec felis sagittis varius. Ut et rutrum quam. Morbi id interdum felis. Mauris id dignissim odio.</p>
</div>https://codepen.io/natalitique/pen/gRdmre
https://codepen.io/natalitique/pen/gRdmre
Requires using data attribute with the full content.
需要使用具有完整内容的数据属性。
