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

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

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

显示结果如下：