css 超出内容隐藏并显示省略号 230322

最新推荐文章于 2024-06-03 20:00:00 发布

鲸鱼编程pyhui

最新推荐文章于 2024-06-03 20:00:00 发布

阅读量142

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/ifubing/article/details/129704524

版权

期望的效果

在这里插入图片描述

超出的内容不显示
以…表达还有更多的内容

代码实现

把关键代码写在盒子容器中

在这里插入图片描述

演示源码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 80px;
            border: 1px solid black;

            /*强制一行显示*/
            white-space: nowrap;
            /*!*溢出隐藏*!*/
            overflow: hidden;
            /*!*文本溢出*!*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="box">
    万代南梦宫公布了《七龙珠：破界斗士（Dragon Ball: The Breakers）》的第二季预告片，让我们一起来看看吧！


    【游侠网】《七龙珠：破界斗士》第二季预告片

    　　本作第二季将追加新可操作角色弥次郎兵卫、琪琪和King Furry，新敌人贝吉塔，感兴趣的玩家可以好好期待一下了。


    广告游戏管家平台_PC端游戏 [下载中心]×

    　　本作采用7v1的多人游戏玩法，玩家分别扮演没有能力的7名幸存者以及1名侵略者。幸存者的目的是想办法从能力超强的侵略者手中逃脱并启动超级时光机，而侵略者不但拥有可以强力的战斗力，而且还可以进化，只要击败幸存者或是破坏时光机便可获得胜利。
</div>

</body>
</html>