css文字超出元素省略,單行、多行省略

阿新 • • 發佈：2021-10-08

githup原始碼:https://github.com/shengbid/vue-demo/tree/master/src/views/Form/ellipsis

效果圖:

通用CSS .box{ width:500px; border:1pxsolidred; padding:10px; line-height:24px; }

1.單行省略

  .singe-line {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  <p>單行省略</p>
  <div class="singe-line box" :title="content">
    {{ content }}
   
</div>

2.兩行省略

.double-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  <p>兩行省略</p>
  <div class="box">
    <div class="double-line" :title="content2">
      {{ content2 }}
     
</div>
  </div>

3.超過元素寬高省略

需要設定元素寬度與高度,根據高度看下最多能放幾行,再設定-webkit-line-clamp的值為最大行數

.over-line {
    height: 65px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  <p>超過元素寬高省略</p>
  <div class="box">
    <div class="over-line" :title="content">
      {{ content }}
     
</div>
  </div>

4.字元擷取省略

通常應用於文章列表的內容簡介,通過擷取固定字元數量來展示,也需要指定寬高

.assign-line {
  height: 45px;
  word-break: break-all;
}

 methods: {
    handleontent() {
      this.content3 = `${this.content.substring(0, 80)} ...`
      this.content4 = `${this.content2.substring(0, 80)} ...`
    }
  }

  <p>字元擷取省略</p>
  <div class="box">
    <div class="assign-line" :title="content">
      {{ content3 }}
    </div>
  </div>
  <div class="box">
    <div class="assign-line" :title="content">
      {{ content4 }}
    </div>
  </div>

程式碼原文,在Vue中寫的

<template>
 <div class="ellipsis-contanier">
  <h2>超過指定行顯示省略號</h2>

  <p>單行省略</p>
  <div class="singe-line box" :title="content">
    {{ content }}
  </div>
  <p>兩行省略</p>
  <div class="box">
    <div class="double-line" :title="content2">
      {{ content2 }}
    </div>
  </div>
  <p>三行省略</p>
  <div class="box">
    <div class="three-line" :title="content">
      {{ content }}
    </div>
  </div>
  <p>超過元素寬高省略</p>
  <div class="box">
    <div class="over-line" :title="content">
      {{ content }}
    </div>
  </div>
  <p>字元擷取省略</p>
  <div class="box">
    <div class="assign-line" :title="content">
      {{ content3 }}
    </div>
  </div>
  <div class="box">
    <div class="assign-line" :title="content">
      {{ content4 }}
    </div>
  </div>
 </div>
</template>

<script>

export default {
  data () {
    return {
      content: 'ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:',
      content2: 'vue.config.js 是一個可選的配置檔案，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那麼它會被 @vue/cli-service 自動載入。你也可以使用 package.json 中的 vue 欄位，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。',
      content3: '',
      content4: ''
    }
  },

  created(){
    this.handleontent()
  },

  methods: {
    handleontent() {
      this.content3 = `${this.content.substring(0, 80)} ...`
      this.content4 = `${this.content2.substring(0, 80)} ...`
    }
  }
}
</script>

<style lang="less" scoped>
.ellipsis-contanier {
  .box {
    width: 500px;
    border: 1px solid red;
    padding: 10px;
    line-height: 24px;
  }

  .singe-line {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }
  .double-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .three-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .over-line {
    height: 65px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .assign-line {
    height: 45px;
    word-break: break-all;
  }
}
</style>