如何在悬停后显示换行文本

Question

存在长文本块：

<div>Text...</div>

当鼠标悬停时，如何显示所有文本？

Answer 1

这会将其他内容排除在外，因此您需要找到一个设计解决方案来解决这一问题，但只需隐藏/显示溢出即可。

p {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p:hover {
overflow: visible;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

这是纯CSS解决方案：

div>span {
display: none;
}
div:hover>span {
display: inline-block;
}

<div>
Long text...
<span>
lorem ipsum dolor sit ames
</span>
</div>