这样实现的效果和老师的不一样
来源：1-7 编程练习
中國移动丶移不动
2020-05-13 20:47:54
<!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{
text-overflow:inherit;
}
</style>
</head>
<body>
<p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
<p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>
1回答
-
好帮手慕夭夭
2020-05-14
同学你好，这是因为设置的样式不对，让超出隐藏的内容显示应该是overflow:visible;而text-overflow是裁剪文本，也就是让超出的内容隐藏，所以不对。参考如下调整：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题