CSS实现多行文字截断以点的形式省略

CSS实现多行文字截断以点的形式

本文CSS用的是SCSS

单行文本截断

.wrap {
  width: 200px;
  height: 200px;
  background: #5bc0de;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

Markdown貌似不支持HTML标签：see here

-webkit-line-clamp多行文字截断

$height: 140px;
$lineHeight: 20px;
.wrap {
  width: 200px;
  height: $height;
  line-height: $lineHeight;
  background: #5bc0de;
  display: -webkit-box;
   /*只有webkit内核的浏览器才行*/
  -webkit-line-clamp: $height / $lineHeight;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这里必须控制height和line-height，并且-webkit-line-clamp必须等于两者的商（整数），控制最多能显示几行。
注意：只有webkit内核的浏览器才行

Markdown貌似不支持HTML标签：see here

定位元素实现多行文本截断

$bg: rgba(255, 255, 255, 0);
.wrap {
  position: relative;
  line-height: 20px;
  width: 200px;
  overflow: hidden;
  word-break: break-all;
  background: #ccc;
  &::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
    /*过渡效果*/
    background: -moz-linear-gradient(to right, $bg, white 50%, white);
    background: -o-linear-gradient(to right, $bg, white 50%, white);
    background: -ms-linear-gradient(to right, $bg, white 50%, white);
    background: -webkit-linear-gradient(to right, $bg, white 50%, white);
    background: linear-gradient(to right, $bg, white 50%, white);
  }
}

Markdown貌似不支持HTML标签：see here

float特性实现多行文本截断

$bg: rgba(255, 255, 255, 0);
$height: 140px;
$lineHeight: 20px;
$beforeWidth: 5px;
.wrap {
  height: $height;
  line-height: $lineHeight;
  background: lightgreen;
  width: 200px;
  overflow: hidden;
  & .text {
    float: right;
    margin-left: -$beforeWidth;
    width: 100%;
    word-break: break-all;
  }
  &::before {
    float: left;
    width: $beforeWidth;
    content: "";
    // 此处height一定要与wrap的height相同
    height: $height;
  }
  &::after {
    float: right;
    content: "...";
    height: $lineHeight;
    line-height: $lineHeight;
    padding-right: $beforeWidth;
    text-align: right;
    width: 3em;
    margin-left: -3em;
    position: relative;
    left: 100%;
    top: -$lineHeight;
     /*过渡效果*/
    background: -moz-linear-gradient(to right, $bg, white 50%, white);
    background: -o-linear-gradient(to right, $bg, white 50%, white);
    background: -ms-linear-gradient(to right, $bg, white 50%, white);
    background: -webkit-linear-gradient(to right, $bg, white 50%, white);
    background: linear-gradient(to right, $bg, white 50%, white);
  }
}

注意：伪元素::before的高度要与容器高度保持一致。

Markdown貌似不支持HTML标签：see here