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

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

本文CSS用的是SCSS

单行文本截断

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

<iframe height="265" style="width: 100%;" scrolling="no" title="单行文本截断" src="//codepen.io/keekuun/embed/gNEJOJ/?height=265&theme-id=0&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/keekuun/pen/gNEJOJ/'>单行文本截断</a> by Keekuun
(<a href='https://codepen.io/keekuun'>@keekuun</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

简书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内核的浏览器才行

<iframe height="265" style="width: 100%;" scrolling="no" title="-webkit-line-clamp多行文字截断" src="//codepen.io/keekuun/embed/WqmBpx/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/keekuun/pen/WqmBpx/'>-webkit-line-clamp多行文字截断</a> by Keekuun
(<a href='https://codepen.io/keekuun'>@keekuun</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

简书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);
  }
}

<iframe height="265" style="width: 100%;" scrolling="no" title="定位元素实现多行文本截断" src="//codepen.io/keekuun/embed/EBMzLp/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/keekuun/pen/EBMzLp/'>定位元素实现多行文本截断</a> by Keekuun
(<a href='https://codepen.io/keekuun'>@keekuun</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

简书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的高度要与容器高度保持一致。

<iframe height="265" style="width: 100%;" scrolling="no" title="float特性实现多行文本截断" src="//codepen.io/keekuun/embed/OeqYaN/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/keekuun/pen/OeqYaN/'>float特性实现多行文本截断</a> by Keekuun
(<a href='https://codepen.io/keekuun'>@keekuun</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

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