单行文本省略

div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

优缺点

• 属性是浏览器原始支持，各大浏览器兼容性好，使用简单
• 只支持单行文本截断，不支持多行文本截取

多行文本省略

1.-webkit-line-clamp实现

div {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

优缺点

• 响应式截断，根据不同宽度作出调整，文本超出范围显示省略号，否则不显示
• -webkit-line-clamp是一个不规范的属性，只有webkit内核的浏览器才支持这个属性,兼容性不好

2.定位元素实现

.wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50px;
    line-height: 25px;
    word-break: break-all;
}
.wrap::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2em;
    font-weight: bold;
    text-align: right;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
}

优缺点

• 兼容性好,对各大浏览器有较好的支持
• 无法识别文字的长短，即文本超出范围才显示省略号,否则不显示

3.利用float进行文本截断

实现原理

1. 当main的高度低于prop，end仍会处于main右下方。
2. 如果main文本过多，高度超过了prop，则end不会停留在右下方，而是掉到了prop下。
3. realend相对于end位置进行偏移，当main的高度低于prop，realend处于边框外
4. 当main文本过多时，realend刚好覆盖在main的边框的右下角

代码

.wrap {
  overflow: hidden;
  height: 50px;
  line-height: 25px;
}
.wrap .main {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.wrap::before {
  content: '';
  float: left;
  width: 5px;
  height: 50px;
}
.wrap::after {
  content: "...";
  float: right;
  position: relative;
  left: 100%;
  top: -25px;
  margin-left: -3em;
  padding-right: 5px;
  height: 25px;
  width: 3em;
  text-align: right;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 50%);
}
<div class="wrap">
     <div class="main">....</div>
</div>

分析

1. before元素(即图中prop)的作用是占据一定宽度，当main元素(即图中main)内容超出before元素高度时after元素（即图中end）可以一直处于before的下方
2. main宽度100%会换行显示，margin-left为-5px是为了让main元素和before元素在同一行，after同样如此。
3. 值得注意的是after的padding值，因为after的margin与width作用，使其显示在wrap外，设置padding值(增加after宽度)并且padding小于等于before宽度，可以显示在before元素下，否则因为过宽而显示在main下方
4. after(即图中end)设置left、top后，即可从end位置移到realend位置

优缺点

1. 兼容性好，响应式截断，文本超出范围才显示，否则不显示
2. 因为是模拟效果，没办法刚好贴合文字