老师,为什么没反应

来源:1-7 编程练习

TechnicalTopSales

2019-10-12 02:03:59

<!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:hover{

    text-overflow:ellipsis;

}

.p2:hover{

    text-overflow:'>>';

}

</style>

</head>

<body>

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

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

</body>

</html>


写回答

1回答

好帮手慕粉

2019-10-12

同学你好,没反应的原因是你没给p标签设置溢出隐藏哦。

1、在吗没有鼠标经过时,应该给p设置overflow:hidden,将多余的内容隐藏:

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

2、在鼠标经过时,再给p设置溢出显示,让多余的文字显示出来:

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

3、不应该在鼠标经过的时候给p1和p2设置text-overflow属性,因为样式应该在没有鼠标经过的时候显示:

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

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

0

0 学习 · 40143 问题

查看课程