1、固定宽度时怎么实现省略号：（单行）

首先我们要设置固定宽度和overflow为hidden；同时我们要禁止换行 white-space: nowrap; 最后就是加上省略号了；

        <div class="box">
            2131312312312312312321312221413132
        </div>

这个使我们比较常用的一种情况：

 .box {
        width: 200px;
        height: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

2、固定宽度时怎么实现省略号：（多行）

多行的时候就相对于单行，首先肯定是要换行。 所以我们把 white-space: nowrap 属性去掉。

接着我们要给修改我们的box的盒子；因普通的盒子并不能满足我们的需求； 我们使用css3中的display：box；属性

display:box; 该属性和其相关子属性都需要做兼容性处理

在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。

可设置如下属性对其子代生效

属性	效果
box-flex:number;	占父级元素宽度的number份
box-orient:horizontal/vertical	horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。
box-direction:normal/reverse	normal 默认值，子代按html顺序排列。reverse 反序
box-align:start/end/center/stretch	start 垂直顶部对齐。end 垂直底部对齐。center 垂直居中对齐。stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
box-pack:start/end/center	start 水平左对齐。end 水平右对齐。center 水平居中对齐

想要多行省略我们需要box-orient为vertical垂直排列；

同时配合line-clamp：限制在一个块元素显示的文本的行数； 实现多行省略效果

.box {
        width: 100px;
        height: 50px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

3、自适应宽度的时候：

我们先书写html结构：

想实现自适应我们需要三层盒子，最外层设置最大的宽度，第二层使我们自适应的盒子，最里面使我们实现省略号的目标位置；

     <div class="body">
        <div class="box">
            <div class="p">213132131413132</div>
        </div>
    </div>

接着设置css： 我们需要为 .body 设置宽度同时display为 flex；同时.box不设宽度但是要设置最小宽度 min-width: 0; 因为我们不设置最小宽度的话当内部元素超出.boby的宽度时，不会显示省略号而是一直变宽；

为.box设置完后就到了最后.p设置省略号出现的三要素了：同时要为.p设置一个最大宽度为100%，因为我们想现实省略号就必须给定宽度，设置一个最大宽度这样当文本达到最大宽度时就可以显示省略号了；

     .body {
        width: 300px;
        height: 500px;
        display: flex; /* 关键外盒子要是flex才能随着内容显示省略号； */
    }

    .box {
        min-width: 0;   /* 必写的关键； */
        height: 50px;
        background: pink;
    }

    .p {
        max-width: 100%; /*  省略号的实现  */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

我们来看下效果：这是宽度未达到最大值的时候

达到最大值的时候：