If the text is too long, the ellipsis will be displayed and the mouse will skip to display the entire content (without using the UI component version)

Business scenario: In the actual page development process, many times the text is too long and you want to display the ellipsis, and the mouse is over to display all the content. Most of the time, you will choose to use UI components tooltiporpoptip

But in fact, there are many times when the requirements for styles are not high . At this time, you can choose a time-saving and labor-saving method. The method is as follows:

The final effect is as follows:

Method 1. Use css

1. Add the following styles to achieve the effect of displaying ellipsis when it is too long

overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

2. Add a title to the corresponding label, the code is as follows, and the effect described in the business scenario can be realized

 <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="value">{
    
    {
    
    value}}</div>

Method 2, use filter

1. Write a filter function for the vue project, and customize the default display maximum length

// 1、书写过滤函数
filter: {
    
    
  ellipsis (value) {
    
    
        if （value.length > 10）{
    
    
        	return value.slice(0,10) + '...'
        }
        return value;
    }
}

2. The filter function is used in combination with title

<div :title="value">{
    
    {
    
     value | ellipsis }}</div>

end~