In the development process, there is often such a demand: a piece of text content. If the text content is short, the entire content will be displayed on the page. If the text content is long, the excess part needs to be highlighted. Then when the mouse hovers, a prompt is required. All text content is displayed in the prompt box.
Because element-ui was introduced in our project, I usually use el-tooltip to implement the text prompt box:
When the product says that it exceeds xx characters, it will be marked, and then the mouse will slide over to prompt them all. Then the general processing is like this:
1. By judging the length of the text, control the display and hiding of el-tooltip, and control the text dotting through css style:
In this way, it may happen that the text content is not all Chinese characters, but numbers or English. At this time, the text content may have exceeded 10 characters, but the ellipses are not displayed, but when the mouse hovers, A prompt box will be displayed.
In order to solve this problem, of course we have a way to solve it . 2. By judging the length of the text, we forcibly limit the number of characters displayed on the page, and display the ellipses in the excess parts , so we will use the following method:
This method can already meet most scenarios and needs. More than X characters will display the ellipses, and the content will be prompted when the mouse slides over~
Then if there is such a demand now: there is a piece of text now, and I don’t know how many characters there will be. The number of characters may be very long or very short, and the product is not sure how many characters should be displayed. She hopes that you can realize it. , in a certain area, and the width of this area can change with the screen size . When the text length is greater than the width of that area, an ellipsis will be displayed on the excess part. When the mouse slides over, a prompt box will appear to prompt the entire content of the text; the text content is very small. When it is short, the entire content is displayed without displaying the prompt box.
At this time, neither of the above methods can be achieved, so what should I do? ?
In fact, there is still a way, which is to get the actual width widthA of the final text content and the actual width widthB of the box wrapping the text content, and judge the two. If the text widthA > widthB, display el-tooltip.
So we can do text overflow display ellipsis processing for the box that wraps the text content, get the actual real width of the text through the mouseenter event, and the actual width of the box that wraps the text content, compare the two, and control the el-tooltip based on the comparison result disabled attribute to achieve the final effect.
Once the idea is determined, a component can be encapsulated and used as needed:
When using it, you only need to pass in the text content and the required el-tooltip style. Get the scrollWidth and offsetWidth in real time through the mouseenter event, even on screens with different widths, or when the text width is uncertain. achieve the same effect.
For example:
Implementation effect on the page:
When the text content of the plan name does not exceed the width of the content area, no copy text will be prompted when the mouse slides over:
When the solution name is too long and too large, the prompt copy will be displayed when the mouse is rolled over:
Using this component, you can adapt text beyond the needs of dotting and prompting text information~
Finally, let’s review the differences between scollWidth, clientWidth, and offsetWidth:
scrollWidth: The width of the actual content of the object, excluding the edge width, will increase as the content in the object exceeds the visible area.
clientWidth: The width of the visual area of the object content, excluding scroll bars and other edges, will change as the display size of the object changes.
offsetWidth: The actual width of the entire object, including scroll bars and other edges, will change as the display size of the object changes.