有个小疑问没弄懂
来源：1-7 编程练习
慕仙0287733
2019-11-19 20:43:53
<!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{text-overflow:ellipsis;}
.p2{text-overflow:clip;}
.p1:hover{overflow:inherit;}
.p2:hover{overflow:inherit;}
</style>
</head>
<body>
<p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
<p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>
老师麻烦先看看代码还有什么问题吗?
然后有个小疑问:为什么.p1和.p2设置hover的时候,.p1{overflow:hidden;}是不能实现的,只有设置inherit就能实现，但是inherit继承的父元素p不就是{overflow:hidden;}这样的值吗?
1回答
-
同学你好，代码效果实现正确。
关于同学的问题。可能有一些误会，这里p1,p2的父元素是body，并不是p元素。而body默认的overflow属性值为visible：
因此，这里p1,p2继承的是overflow：visible。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 1