多行文本溢出显示省略号

酒笙青栀丶

于 2022-10-08 11:00:35 发布

阅读量53

点赞数

文章标签： html

本文链接：https://blog.csdn.net/anqi124415/article/details/127204934

版权

方法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: 16px;
        }
    </style>
<body>
    <div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带带 38157</div>
</body>

方法2：弹性盒

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

overflow：hidden；溢出隐藏

   <style>
        .box2 {
       /* 1.设置宽度 */
      width: 200px;
      background-color: pink;
      line-height: 30px;
      /* 2.设置旧版弹性盒 */
      display: -webkit-box;
      /* 3. 控制行数*/
      -webkit-line-clamp: 2;
      /* 4. 设置子元素的排列方式  垂直排列*/
      -webkit-box-orient: vertical;
      /* 5.溢出隐藏 */
      overflow: hidden;
        }
    </style>

<body>

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

注意：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 设置或伸缩盒对象的子元素的排列方式 。
vertical:从上到下垂直排列子元素

酒笙青栀丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行文本溢出显示省略号

将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp：2；用来限制在一个快元素显示的文本行数 -webkit-box-orient：vertical；可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力。-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。-webkit-box-orient 设置或伸缩盒对象的子元素的排列方式。/* 4. 设置子元素的排列方式垂直排列*/
复制链接

扫一扫