单行和多行文本超出省略

---

1. 单行文本超出省略

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

还需要加宽度width属性来兼容部分浏览。

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

2.1 只局限于浏览器内核是webkit的方法

css属性	作用
display: -webkit-box;	必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient: vertical;	必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式为从上向下垂直排列子元素 。
-webkit-line-clamp: 3;	限制在一个块元素显示的文本的行数，此处为3行。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图：

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及WebKit内核的移动端；

2.2. 兼容各种浏览器方法

<div class="wrap">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus
        atquequos magnam assumenda quod architecto perspiciatis animi.
    </div>
</div>

.wrap {
    height: 40px;
    width: 400px;
    line-height: 20px;
    overflow: hidden;
}

.wrap .text {
    float: right;
    margin-left: -5px;
    width: 100%;
    word-break: break-all;
    text-align: justify;
}

.wrap::before {
    float: left;
    width: 5px;
    content: '';
    height: 40px;
}

.wrap::after {
    float: right;
    content: "...";
    height: 20px;
    line-height: 20px;
    /* 为三个省略号的宽度 */
    width: 3em;
    /* 使盒子不占位置 */
    margin-left: -3em;
    /* 移动省略号位置 */
    position: relative;
    left: 100%;
    top: -20px;
    padding-right: 5px;
    background-color: #fff;
}

原理：

有个三个盒子 div，粉色盒子左浮动，浅蓝色盒子和黄色盒子右浮动：

• 当浅蓝色盒子的高度低于粉色盒子，黄色盒子仍会处于浅蓝色盒子右下方。
• 如果浅蓝色盒子文本过多，高度超过了粉色盒子，则黄色盒子不会停留在右下方，而是掉到了粉色盒子下。

将黄色盒子进行相对定位，将做内容溢出判断的黄色盒子移动到文本内容右下角，省略号则会被移到外框，只要我们使用 overflow:hidden就可以隐藏掉。

基本原理就是这样，我们可以将浅蓝色区域想象成标题，黄色区域想象为省略号效果。那么你可能会觉得粉色盒子占了空间，那岂不是标题会整体延后了吗，这里可以通过 margin 的负值来出来，设置浅蓝色盒子的 margin-left 的负值与粉色盒子的宽度相同，标题也能正常显示。

<div class="wrapper wrapper1">
    <i>float:left</i>
    <p>这里是文字，这句话会很长很长，dsfsfsdfsdfsdfsddtersdfasdfsgsdfgsdgsdgsdfgsdfgsdfgsgfsfgsdfgsdfgsdgsdgs131313这里是文字，这句话会很长很长，它会长到整个文本框都包不住的地步。这里是文字，这句话会很长很长，它会长到整个文本框都包不住的地步。这里是文字，这句话会很长很长，它会长到整个文本框都包不住的地步。
    </p>
    <span>float:right</span>
</div>

.wrapper {
    width: 500px;
    margin: 10px auto;
    max-height: 180px;
    line-height: 36px;
    overflow: hidden;
    box-shadow: 0 0 4px 0 rgb(0, 0, 0);
}

i {
    float: left;
    width: 100px;
    background: rgba(255, 0, 0, .3);
    height: 180px;
}

p {
    float: right;
    width: 400px;
    background: rgba(0, 255, 0, .3);
    margin: 0;
    position: relative;
    font-size: 16px;
    text-align: justify;
    word-break: break-all;
}

span {
    float: right;
    width: 100px;
    height: 36px;
    background: rgba(0, 0, 255, .3);
    position: relative;
}

span:after {
    content: '...';
    position: absolute;
    top: -36px;
    width: 16px;
    left: 484px;
    text-align: center;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%)
}

---

【参考文档】：

1. CSS实现单行、多行文本溢出显示省略号（…）
2. 4种方法实现单行、多行——文本溢出显示省略号
3. 纯css实现多行文本省略号