CSS中文字超出部分用省略号显示

最新推荐文章于 2024-01-25 14:06:28 发布

nuomi_w

最新推荐文章于 2024-01-25 14:06:28 发布

阅读量336

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/nuomi_w/article/details/121427960

版权

必须满足三个条件：

①先强制一行内显示文本

white-space: nowrap; ( 默认 normal自动换行)

②超出的部分隐藏

overflow：hidden;

③文字用省略号替代超出的部分

text-overflow: ellipsis;

 <style>
        .show {
            margin: 30px auto;
            width: 100px;
            height: 50px;
            background-color: pink;
            /* 1.先强制一行内显示文本 */
            white-space: nowrap;
            /* 2.超出的部分隐藏 */
            overflow: hidden;
            /* 3.文字用省略号替代超出的部分 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="show">啥也不想说，此次省略一万字</div>
</body>

优惠劵

nuomi_w

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中文字超出部分用省略号显示

必须满足三个条件：①先强制一行内显示文本white-space: nowrap; ( 默认 normal自动换行)②超出的部分隐藏overflow：hidden;③文字用省略号替代超出的部分text-overflow: ellipsis; <style> .show { margin: 30px auto; width: 100px; height: 50px; bac
复制链接

扫一扫