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

通用CSS

 .box {
    width: 500px;
    border: 1px solid red;
    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.超过元素宽高省略

.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>

整体代码

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>