Html 使用CSS省略号在悬停时显示截断的文本与它下面的文本重叠

我在侧边栏中有一个

name

标记，如果长文本后跟三个点（lorem ipsum…），则应显示单行和截断，并应在悬停时显示全文

我可以使用css实现这一点，但我的问题是，当显示全文时，它与下面的文本重叠。（附图）

HTML

这是一个

悬停时文本重叠。预期的行为是，它应该将内容推到下面。

---

您只需将

高度：自动

添加到

悬停

状态，即可正常工作：

.name{
宽度：120px；
颜色：#0079c1；
高度：2米；
线高：1米；
字体大小：20px；
字体大小：400；
文本溢出：省略号；
边缘底部：12px；
光标：指针；
单词break：打破一切；
溢出：隐藏；
空白：nowrap；
}
名称：悬停{
溢出：可见；
空白：正常；
高度：自动；/*刚刚添加了这一行*/
}

益智益智益智益智益智益智益智益智益智益智益智益智益智益智

Lorem ipsum dolor sit amet，奉献精英。这句话的意思是：“我的名字叫乌拉姆·福加·阿斯佩纳图尔，但我认为这是一种不加区分的、类似的、重复的行为，但不包括分子。”。

在我创建的这个解决方案中，表单中的一些长电子邮件地址也面临类似的问题，其中完整内容显示在工具提示样式的伪元素中的悬停位置

正文{
背景：#eee；
}
.盒子{
背景：#fff；
盒影：0 25px 30px 0 rgba（0,0,0,0.15）；
边界：rgba（0,0,0,0.3）；
宽度：10雷姆；
保证金：2rem自动；
填充：2rem；
}
.省略号{
显示：块；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
过渡：全部.2s线性；
空白：nowrap；
填充：.5rem1rem；
}
.省略号：焦点，.省略号：悬停{
颜色：透明；
}
.省略号：焦点：之后，.省略号：悬停：之后{
内容：attr（数据文本）；
溢出：可见；
文本溢出：继承；
背景：#fff；
位置：绝对位置；
左：自动；
顶部：自动；
宽度：自动；
最大宽度：20雷姆；
边框：1px实心#eaebec；
填充：0.5雷姆；
盒影：02px4p0RGBA（0,0,0,28）；
空白：正常；
单词包装：打断单词；
显示：块；
颜色：黑色；
最高保证金：-1.25雷姆；
}

f6cd8edc-60c2-11e7-9919-ef706e78474f
莫里斯·艾洛斯·奥迪奥。这是欧盟的宿怨。佩伦茨克在显贵面前，伊普苏姆奎斯，鲁特鲁姆面前。Donec ac lorem nisl。芦苇粗粉。这是一种积垢。这是我的最爱。威尼斯人的名字是尼布，我的名字是俄罗斯人的名字，我的名字是莫利斯·厄洛斯的名言。马蹄铁。这是我的荣幸。莫比，我是猫。莫里斯是奥迪奥的贵人

请在JSFIDLE创建一个小提琴。net@AMACB美好的有没有办法不需要重复的数据文本？似乎多余。。。是否可以使用innerHtml之类的内容？请注意，此解决方案似乎不允许用户高亮显示全文以进行复制和粘贴@Mi Creativity answer确实提供了该功能。

<p class="name">
    Lorem ipsum lorem ipsum lorem ipsum
</p>

.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; 
}