How to implement overflow text ellipsis

background

Sometimes, for the beauty of the page, for the longer title or introduction content, it is desirable to replace the overflowing content with ellipsis. Although this reduces the user experience, it will be visually cleaner.

plan

Single-line text overflow omitted

  <p class="txt">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p>

  <style>
   .txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>

Multiline text overflow omitted

  <p class="txt2">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p>

<style>
  .txt2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 设置溢出行数 */
  }
</style>

If you use scss in your project, you can write a mixin to handle it

 @mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;

    @if $line==1 {
        white-space: nowrap;
        word-wrap: normal;
    }

    @else {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $line;
    }
}

Note: This is a non-standard property, but it is supported by major browsers (except IE)

Reference Document 1: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

How implements overflow text ellipsis was first published on small , if it helps you, don't forget to like and support it🎉