vue-ellipsis-component: vue abbreviated component that satisfies various scenarios

Birth of vue-ellipsis-component

Text abbreviation is one of the most common needs in business. Usually we use webkit-line-clamp to achieve text abbreviation, but this is limited to multi-line abbreviation. If the evil PM's brain is hot, you need to support abbreviation when it exceeds a certain height. ..... In order to keep myself from being overwhelmed in this scenario, I decided to explore the existing vue abbreviated components first!

After some searching, I found a vue abbreviated component: vue-clamp open sourced by Gu Yiling, the general functions are as follows:

• Support for multi-line abbreviations
• Support for shrinking when exceeding the maximum height
• Supports custom abbreviations, and supports custom abbreviations where they appear
• Support for abbreviated callbacks, triggered when truncation occurs
• Support for adaptive abbreviated

The functions supported by vue-clamp are quite complete, and the implementation principle of line number truncation is also quite interesting. It mainly uses the characteristics of the getClientRects API to directly obtain the line number of inline elements, so there is no need to manually set line-height . For details, please refer to MDN !

However, vue-clamp only supports plain text abbreviations. If it encounters rich text scenarios, it will be stretched. At this moment, I found a react abbreviated component: react-ellipsis , with more complete functions:

• Support for multi-line abbreviations
• Support for shrinking when exceeding the maximum height
• Support custom abbreviations
• Support for abbreviated callbacks, triggered when truncation occurs
• Support for rich text abbreviations
• Support tail text filtering
• Support for adaptive abbreviated
• Display m lines when more than n lines
• Display height n when exceeding height n

I have confirmed the eyes, it is the person I need (✺ω✺) Unfortunately, it is a react component, so I started to transplant (copy) it into a vue component~ vue-ellipsis-component was born like this!

Briefly introduce the function and principle of the component

take one 🌰

vue-ellipsis-component has completely transplanted the functions of react-ellipsis (copy and copy must be complete), for a simple demo:

<template>
  <vue-ellipsis
    :visible-line="2"
    text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话">
  </vue-ellipsis>
</template>

For more demos, you can view the document ~

abbreviated strategy

vue-ellipsis-component will adopt different abbreviation strategies according to the complexity of incoming props, such as , the above example , only text and visibleLine are passed in for multi-line abbreviation, so the component will implement multi-line abbreviation based on conventional strategies Abbreviation: Use the css -webkit-line-clamp property for abbreviation; if it needs to be abbreviated when the maximum height is exceeded, a dynamic calculation strategy will be used: use JavaScript to dynamically calculate the abbreviated point, and then cut the text content, such as the following demo:

<template>
  <vue-ellipsis
    :visible-height="60"
    text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话">
  </vue-ellipsis>
</template>

And in the dynamic calculation strategy, vue-ellipsis-component uses dichotomy to improve the performance of text abbreviation!

Adaptive Abbreviation

vue-ellipsis-component enables adaptive abbreviation by passing reflowOnResize . By default, ResizeObserver is used to monitor container changes. If the browser does not support ResizeObserver , then window.resize is used as the downgrade solution 😄

<template>
  <vue-ellipsis
    :visible-line="2"
    text="这是一段非常非常非常非常非常非常非常长的话"
    reflowOnResize>
   </vue-ellipsis>
</template>

Rich Text Abbreviation

vue-ellipsis-component enables rich text abbreviation by passing useInnerHtml , and inserts text into the dom as HTML, so you need to ensure the content of text to prevent XSS attacks!

<template>
  <vue-ellipsis
    :visible-line="2"
    use-inner-html
    text="<b>这是一段</b><u>非常非常非常非常非常非常非常非常非常非常非常长</u>的话">
  </vue-ellipsis>
</template>

lack of components

Unlike vue-clamp, vue-ellipsis-component requires you to manually set a line-height :

In the case of satisfying the conventional policy, whether or not to actively set line-height has no effect on the abbreviated results, but under dynamic calculation of abbreviated line-height , the abbreviated results may not be as expected;

The abbreviated strategy of dynamic calculation is to calculate a visible height based on line-height and the incoming visibleLine , and then compare the visible height with the height of the current container to determine whether text clipping is required. It can be seen that this process largely depends on line-height ; when line-height is the default value of normal , the actual line height depends on the browser, but the value of each browser may not be consistent. vue-ellipsis-component will be compatible with line-height: normal , but in order to ensure the same abbreviated effect in different browsers, it is better to set a line-height !

Warehouse Address

Github address: vue-ellipsis-component

Document address: docs

If you find it helpful, you can install and use it in your project, or give a star ⭐️!

feedback

If you find problems or deficiencies in the components, you can submit your problems to github issue , or submit a Pull Request, thank you for your participation!