CSS实现溢出显示省略号

小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~

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

效果图：

实现代码:

HTML部分

<h3>使用css实现单行省略号</h3>
<div class="box1">
    <a href="#" class="a1">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.
    </a>
</div>

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;
     }

注:此案例为京东首页的部分切图，此时的省略号可以用上述代码实现

2.多行显示省略号

效果图：

HTML部分

<h3>使用css实现三行之后显示省略号</h3>
<div class="box2">
    <a href="#" class="a1">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.
    </a>
</div>

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.内容中间显示省略号(方法一)

效果图:

HTML部分

<h3>使用css实现中间显示省略号方法一</h3>
<div class="box3">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<span></span><a href="#">全文</a>
</div>

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: '......';
       }

实际案例应用场景说明:

4.内容中间显示省略号(方法二)

效果图：

HTML部分

<h3>使用css实现中间显示省略号方法二</h3>
<div class="box4">
    <a href="#">
        <span class="span1" title="我是左侧内容我是左侧内容我是左侧内容">我是左侧内容我是左侧内容我是左侧内容</span>
        <span class="span2" title="我是右侧内容我是右侧内容"></span>
    </a>
</div>

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;
      }

实际案例应用场景说明:

综上所述:以上四种方案是目前页面中应用较多的实现省略号的方法，仅代表个人观点，如您有更优的方法欢迎联系我们。