人亦已歌 发表于 2023-2-1 19:38:35

CSS核心（五十）遮罩效果与文字超出容器显示省略号


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩效果与文字超出容器显示省略号</title>
</head>
<style>
        .box{
                width:200px;
                height:200px;
                border:1px solid #000;
                position:relative;
                /*overflow:hidden;*/               
        }
        .zhaozi{
                width:200px;
                height:50px;       
               
                color:#000000;
                /*line-height:50px;*/
                text-align:center;
                /* 第一步：超出部分隐藏 */
                overflow:hidden;
                /* 第二步：设置文字不换行 */
                white-space:nowrap;
                /* 第三部：设置省略号 */
                text-overflow:ellipsis;
        }
        .box:hover .zhaozi{
                position:absolute;
                bottom:0;
                left:0;
                background:rgba(255,255,255,0.5);       
        }
</style>
<body>
<div class="box">
        <img src="img/1.jpg" width="200" height="200">
    <div class="zhaozi">
            超大内存超大屏幕超长待机照亮你的大脸
    </div>
</div>
</body>
</html>




显示结果如下：


linsui79 发表于 2023-2-19 02:30:16

^不错,很受启发!尤其是我一个很想学编程的人。

CXJ 发表于 2023-2-25 18:35:07

读了你的观点我很受用，也很感激，你说出了我们都存在，但都又没有太重视的问题，我想，它将伴随着我以后的学习和工作．    高手！！！

zzl004 发表于 2023-3-1 15:58:40

感谢,这真的给我很大的启发..

GONNASAYBYE 发表于 2023-3-8 09:52:46

真的很不容易呀!说的好!

flord 发表于 2023-3-14 01:45:29

终于明白了自己的方向,感谢楼主

海蓝兽 发表于 2023-3-19 10:39:46

受益匪浅。。。。。

aixo 发表于 2023-3-25 02:31:41

感触很多！！！在看这贴子前，我和你一样有同样的想法、同样的编程方法。。而且我是个学生。我很高兴看到这贴子，它能让我少走很多歪路！！！

yjwjsion 发表于 2023-3-30 11:28:31

不错

Loner 发表于 2023-4-2 11:13:14

感动啊!让我认清了方向,遗憾的是怎么怎么没在多年前就认识到这点
页: [1] 2 3 4
查看完整版本: CSS核心（五十）遮罩效果与文字超出容器显示省略号