浏览器无法预览效果,请老师帮忙检查

来源:1-7 编程练习

慕斯9523191

2020-08-13 09:20:22

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

/*此处写代码*/

    .p1{text-overflow:clip;}

    .p2{text-overflow:ellipsis;}

    p:hover{overflow:visible;}

</style>

</head>

<body>

<p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>

<p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>

</body>

</html>


写回答

1回答

好帮手慕星星

2020-08-13

同学你好,建议在本地浏览器运行,效果如下:

http://img.mukewang.com/climg/5f34a8a20907571819200135.jpg

超出的内容没有隐藏。可以在p元素中设置超出隐藏,这样才能不显示

http://img.mukewang.com/climg/5f34a8d909fe880203430161.jpg

自己再测试下,祝学习与愉快!

0

0 学习 · 40143 问题

查看课程