老师，我的问题是本节的1-7编程练习。
来源：1-7 编程练习
慕斯0469344
2019-06-26 14:55:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
p { width: 500px;font-size:20px; margin: 10px auto; background: #abcdef;overflow: hidden;}
/*此处写代码*/
.p1{
/* display: block; */
text-overflow: ellipsis;
}
.p2{
/* display: block; */
text-overflow: clip;
}
.p1:hover{
display: block;
}
</style>
</head>
<body>
<p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
<p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>我的问题是，我无法实现，当鼠标放到文字上时，省略号里面的文字重新显示出来。还有第二行文字也是无法在鼠标放上去的时候显示出来。
写回答
1回答
-
同学你好， 因为你给父元素设置了overflow：hidden;属性。导致超出父元素宽度的的部分会被隐藏起来， 建议： 可以参考如下思路
父元素不设置宽度和overflow：hidden属性，可以添加text-align: center;属性让内容水平居中
给两段文字设置固定的宽度， 并添加overflow属性，隐藏超出的内容。
鼠标移入文字上的时候， 修改宽度为百分百， 显示全部的文字内容
同学可以结合示例， 自己再去测试一下效果哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题
老师，我的问题是本节的1-7编程练习。
回答 1
1-7 编程练习
回答 1
1-7编程练习 老师帮忙检查一下 谢谢
回答 1
老师这块我怎听不懂，怎办？
回答 1
1-7 编程练习作业提交
回答 1