HTML/CSS之如何溢出显示省略号

最新推荐文章于 2024-03-11 09:54:23 发布

夹心776655

最新推荐文章于 2024-03-11 09:54:23 发布

阅读量141

点赞数

分类专栏： HTML&CSS重要概念文章标签： css html

本文链接：https://blog.csdn.net/qq_37086980/article/details/109966399

版权

HTML&CSS重要概念专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.单行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行显示省略号</title>
    <style>
        .box{
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color:aqua;
            /* 1.盒子内容溢出隐藏 */
            overflow: hidden;
            /* 2.强制不换行 */
            white-space: nowrap;
            /* 3.文字溢出显示省略号 */
            text-overflow: ellipsis;
            /* 4.文字溢出隐藏 */
            /* text-overflow: clip; */
        }
    </style>
</head>
<body>
    <div class="box">
        华为 HUAWEI P40 麒麟超感知徕卡三摄 30倍数字变焦 6GB+128GB亮黑色全网通5G手机
    </div>
</body>
</html>

2.多行文本溢出显示省略号

伪元素方法实现多行文本溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行显示省略号</title>
    <style>
        .box{
            width: 200px;
            /* 1.高度是行高的n倍 */
            height: 80px;
            line-height: 40px;
            background-color:aqua;
            position: relative;
            /* 4.盒子两端对齐 */
            text-align: justify;
            /* 5.溢出隐藏 */
            overflow: hidden;
        }
        .box::after{
            /* 2.给盒子添加伪元素, 定位到右下角的位置 */
            content:"...";
            position: absolute;
            right: 0;
            bottom: 0;
            /* 3.伪元素的模型盒的宽度为1em */
            width:1em;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        华为 HUAWEI P40 麒麟超感知徕卡三摄 30倍数字变焦 6GB+128GB亮黑色全网通5G手机
    </div>
</body>
</html>

webkit内核方法实现多行文本溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行显示省略号</title>
    <style>
        .box{
            width: 200px;
            background-color: aqua;
            /* 给元素设置隐藏属性 */
            overflow: hidden;
            /* 文本溢出显示省略号 */
            text-overflow: ellipsis;
            /* 将对象作为弹性伸缩盒子模型显示 */
            display:-webkit-box;
            /* 用来限制在一个块元素显示的文本行数, 这是一个不规范的属性,
            它没有出现在CSS规范草案中 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
       
    </style>
</head>
<body>
    <div class="box">
        华为 HUAWEI P40 麒麟超感知徕卡三摄 30倍数字变焦 6GB+128GB亮黑色全网通5G手机
    </div>
</body>
</html>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS之如何溢出显示省略号

1.单行文本溢出显示省略号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单行显示省略号</title> <style> .
复制链接

扫一扫