overflow使用
来源：1-7 编程练习
精慕门0030373
2021-06-03 07:49:04
老師請問這裡用p:hover{overflow:inherit;}(繼承父元素)然後移過去就顯示了
這裡原理是什麼?它是繼承誰呢
<!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;}
p:hover{overflow:inherit;}
</style>
</head>
<body>
<p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
<p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>
1回答
-
同学你好，解答如下：
1、overflow: inherit;是继承父元素的样式，由于body是p的父元素，并且body有默认的overflow样式，因此p会继承body的overflow。
2、body的overflow样式如下：
而overflow:visible；的意思是不修剪内容，即使内容超出，也全部显示出来。因此鼠标移入p后，p也有overflow:visible样式，此时就会显示之前被隐藏的部分文字（超出的内容会被显示出来）。
祝学习愉快！
0
相似问题