哪里错了,为什么内容都不省略呢?

来源:1-7 编程练习

慕后端5428016

2019-10-09 09:03:36

<!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:ellipsis;
        }
        .p2{
            text-overflow:clip;
        }
        p:hover{
            overflow:visible;
        }
    </style>
</head>
<body>
    <p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
    <p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>

写回答

1回答

好帮手慕粉

2019-10-09

同学你好,内容没有省略的原因是你没有设置溢出隐藏哦,即overflow:hidden,把这个样式加上就可以实现了。

建议参考:

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

希望我的回答能够帮助到你,望采纳,祝学习愉快!

0

0 学习 · 40143 问题

查看课程