css超出字数省略号(常用的实际案例应用场景)

Joker • • 前端笔记 • 213 阅读

用css限制文本字数超出省略号，就是文字很多超出了盒子需要把超出字数显示成省略号，前端开发工作中我们常用的实际案例应用场景有单行文本超出字数显示省略号、多行文本超出字数显示省略号、内容中间超出字数显示省略号。

一、单行文本超出字数显示省略号

1、效果图：

单行文本超出字数显示省略号

2、实现代码:

HTML部分

使用css实现单行省略号


    Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Ipsam ipsaexplicabo quos sapiente ea error,
 mollitia necessitatibus animi facere rem non sed velit aperiam laboriosamdebitis.
  Quae deleniti doloremque nisi.
    

CSS部分

h3 {
    padding-left: 10px;
    }
.a1 {
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    } 
.box1 {
     height: 40px;
     line-height: 40px;
     background-image: linear-gradient(white, gray);
     box-shadow: 0 0 2px 2px rgb(148, 145, 145);
     box-sizing: border-box;
     /* 单行显示省略号 */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     }

二、多行文本超出字数显示省略号

1、效果图：

多行文本超出字数显示省略号

2、实现代码:

HTML部分

使用css实现三行之后显示省略号

   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta laudantium aspernatur illo id, beatae mollitia magnam, laboriosam cupiditate harum veritatis ullam delectus adipisci quasi, laborum ipsum quis est molestiae.
   

CSS部分

h3 {
   padding-left: 10px;
   }
.a1 {
   text-decoration: none;
   color: #000;
   padding-left: 20px;
   }
.box2 {
   height: 60px;
   line-height: 30px;
   background-image: linear-gradient(white, gray);
   box-shadow: 0 0 2px 2px rgb(148, 145, 145);
   overflow: hidden;
   /* 三行显示省略号 */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   }

3、实际案例应用场景说明:

多行文本超出字数显示省略号

注：此时明显是折行后在第二行多余的部分显示省略号，那由于内容不固定字数不固定，所以需要动态设置，那么就应用到了上述的多行显示省略号的方法

三、内容中间超出字数显示省略号(方法一)

1、效果图：

内容中间超出字数显示省略号

2、实现代码：

HTML部分

使用css实现中间显示省略号方法一

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
 Commodi perferendis iste sit! Et quos aspernatur suscipit ab qui?
  Cumque debitis fugiat ab fugit repudiandae, vel eius error nisi minus
  全文

css部分

.box3 {
        /* height: 120px; */
        line-height: 30px;
        background-image: linear-gradient(white, gray);
        box-shadow: 0 0 2px 2px rgb(148, 145, 145);
       }
.box3 span::after {
        content: '......';
       }

3、实际案例应用场景说明:

内容中间超出字数显示省略号

四、内容中间超出字数显示省略号(方法二)

1、效果图：

内容中间超出字数显示省略号

2、实现代码:

HTML部分

使用css实现中间显示省略号方法二


    
      
           我是左侧内容我是左侧内容我是左侧内容
        
      
    

css部分

.box4 {
         height: 30px;
         line-height: 30px;
         background-image: linear-gradient(white, gray);
         box-shadow: 0 0 2px 2px rgb(148, 145, 145);
        }

.box4 .span1 {
        float: left;
        width: 62%;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        }

.box4 a {
        color: #000;
        }

.box4 .span2::before {
        content: attr(title);
        width: 38%;
        float: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: rtl;
        }

/* 优化两个span中间的间距 */
.box4 {
        text-align: justify;
      }

3、实际案例应用场景说明：

内容中间超出字数显示省略号