二、文本溢出处理显示省略号_文字溢出隐藏显示省略号-优快云博客

本文链接：https://blog.youkuaiyun.com/hu_xingwei/article/details/126090173

二、文本溢出处理显示省略号

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

方法1：省略号

单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号

<style>
.box{
    width:200px;
    background-color:red;
    height:40px;
    line-height:40px;
    /* 关键代码 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap;  /* 强制不换行 */
}
</style>

<body>
<div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰带 38157</div> 
</body>

方法2：伪元素

  <style>
        .box {
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: orchid;
            
            overflow: hidden;/* 溢出隐藏 */
            white-space: nowrap;/* 强制不换行 */
            position: relative;/* 子绝父相 */

        }
        .box:after {
            content: "...";
            position: absolute;
            right: 0px;
            bottom: 0px;
            /* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */
            width: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        可以沉迷，可以抱怨，可以奔溃，可以抱怨，可以奔溃，人要有自愈能力
    </div>
</body>

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

方法1：伪元素

<style>
    .box {
        width: 200px;
        /* 通过行高和高度控制显示的行数 */
        height: 120px;
        line-height: 30px;

        background-color: red;
        position: relative;
        /* 文本两端对齐方式 */
        text-align: justify;
        /* 溢出隐藏 */
        overflow: hidden;

    }

    .box:after {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: red;
        /* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */
        width: 20px;
        background-color: red;

    }
</style>
<body>
    <div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带带 38157</div>
</body>

说明：

可能文字未超出行的情况下也会出现省略号
将height设置为line-height的整数倍，防止超出的文字露出（通过行高和高度控制显示的行数）。
给:after添加背景可避免文字只显示一半。

方法2：弹性盒

width：200px；设置盒子的宽度(限制宽度) display：-webkit-box；将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp：2；用来限制在一个快元素显示的文本行数 -webkit-box-orient：vertical；设置盒子子元素的排列方式

overflow：hidden；溢出隐藏

   <style>
        .box2 {
            width: 200px;
            line-height: 30px;
            background-color: pink;
            /* 旧版弹性盒 */
            display: -webkit-box;
            /* 弹性盒子元素垂直排列 */
            -webkit-box-orient: vertical;
            /* 控制要显示的行数 */
            -webkit-line-clamp: 4;
            /* 溢出隐藏 */
            overflow: hidden;
        }
    </style>

<body>

    <div class="box2">
        可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力
    </div>
</body>