Effect:

Box {width: 500px; border: 1px solid red; padding: 10px; line-height: 24px; }

1. Single line ellipsis

.singe-line {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all; white-space: nowrap; } <p> single line omitted </p><div class="singe-line box" :title="content">
    {{ content }}
  </div>
Copy the code

2. Two lines are omitted

.double-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; } <p> Two lines omitted </p><div class="box">
    <div class="double-line" :title="content2">
      {{ content2 }}
    </div>
  </div>
Copy the code

3. Over element width and height ellipsis

You need to set the width and height of the element. According to the height, see how many lines can be placed at most. Then set the value of -webkit-line-clamp to the maximum number of lines

.over-line {
    height: 65px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; } <p> Omit </p><div class="box">
    <div class="over-line" :title="content">
      {{ content }}
    </div>
  </div>
Copy the code

4. Character interception and omission

This is usually used to describe the content of a list of articles by cutting a fixed number of characters and specifying the width and height

.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> <div class="box"> <div class="assign-line" :title="content"> {{content3}} </div> </div class="box"> <div class="assign-line" :title="content"> {{ content4 }} </div> </div>Copy the code

The original code, written in Vue

<template> <div class="ellipsis-contanier"> <h2> Display ellipsis beyond specified lines </h2> <p> Single line ellipsis </p> <div class="singe-line box" </p> <div class="box"> <div class="double-line" :title="content2"> {{content}} </p> Content2}} </div> </div> </p> <div class="box"> <div class="three-line" :title="content"> {{content}} </div> < / div > < p > elements more than wide high omit < / p > < div class = "box" > < div class = "over - the line:" title = "content" > {{content}} < / div > < / div > <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 is an optional configuration file that is automatically loaded by @vue/cli-service if it exists in the root directory of the project (the same as package.json). You can also use the vue field in package.json, but note that this requires you to follow the JSON format strictly. ', 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>Copy the code