Display processing method for character overflow

Abstract

The invention provides a character overflow display processing method, which comprises the following steps of: S1, determining a specific demand when displaying a character through an attribute input by a user; s2, judging whether the characters exceed the container or not according to different scene triggering characters; s3, judging whether the character overflows or not, and if the character overflows, processing the character overflow condition by using the CSS; and S4, according to the judgment structure in the step S3, determining whether a character prompt box is displayed or not. The character overflow display processing method has the beneficial effects that all scenes of character overflow are fully supported, and currently missing scenes are well supported, such as conversion between single-line overflow and multi-line overflow, real-time response of character overflow events and slow rendering of big data character overflow.

Description

Technical Field

[0001] The invention belongs to the field of computer technology, and in particular relates to a display processing method for text overflow. Background Art

[0002] Currently, high-end physical devices can support users' high-degree of freedom in operation. Users using different physical devices or users zooming in and out of the browser window may cause serious style problems such as layout dislocation and text disorder. Therefore, Web front-end development must consider the resolution adaptation of the page;

[0003] Text overflow is a relatively complex situation. In this case, developers need to pay attention to the following issues: how to determine if the text exceeds the container, when to determine whether the text exceeds the container, compatibility of single-line overflow and multi-line overflow processing methods, display judgment and processing of text prompt boxes, and performance optimization in the case of large data volumes.

[0004] There are relatively mature multi-line text ellipsis plug-ins, such as jQuery.dotdotdot, react-lines-ellipsis, and Clamp.js. They all have the following problems: they cannot continuously monitor the width and height, they are slow to process large-scale data, they only provide style processing, and they do not respond to events. If you need to add a text prompt box, it cannot be completed through secondary development. Summary of the invention

[0005] In view of this, the present invention aims to provide a display processing method for text overflow to at least solve one of the problems in the background technology.

[0006] To achieve the above object, the technical solution of the present invention is achieved as follows:

[0007] A display processing method for text overflow, comprising:

[0008] S1. Determine the specific requirements for displaying text based on the attributes input by the user;

[0009] S2, judging whether the text exceeds the container according to different scenarios;

[0010] S3, determine whether the text overflows, and if so, use CSS to handle the text overflow;

[0011] S4. According to the judgment structure of step S3, determine whether to display the text prompt box.

[0012] Furthermore, before executing step S3, it is determined whether the amount of text data exceeds a set limit, and if it exceeds the limit, it is intercepted to increase the rendering speed;

[0013] When the amount of data in the text prompt box exceeds the limit, the scroll loading technology is used to dynamically load a new batch of data by comparing the scrollTop and scrollHeight of the scroll wheel when the scroll wheel approaches the bottom.

[0014] Furthermore, in step S1, the specific requirements include:

[0015] Number of text display lines: The default value is 0, which means that the text will automatically fill the width and height of the container. If a specific number of lines is set, it will be processed according to the number of lines;

[0016] Whether to display the prompt box: The default value is false, and the prompt box is only displayed when the text overflows;

[0017] The ellipsis position when a single line of text overflows: middle ellipsis or end ellipsis, the default value is tail;

[0018] Method for triggering text overflow judgment: affects the visibility of the prompt box and needs to be used in conjunction with different trigger events in step S2;

[0019] Limit: The default value is 10000, which indicates the upper limit of the number of characters. Characters exceeding this limit will be truncated to improve performance.

[0020] Furthermore, in step S2, the method for determining whether the text exceeds the container according to different scenarios includes:

[0021] Static scenario: When the height and width of the container are fixed and the displayed data does not change, overflow detection can be performed after page rendering is completed;

[0022] Data change scenario: When the height and width of the container are fixed, but the displayed data changes or the components become visible or invisible, overflow judgment needs to be triggered after the data changes, the components are displayed, or when the user operates;

[0023] Size change scenario: When the height or width of the container changes, monitor its changes and trigger overflow judgment when it changes.

[0024] Furthermore, in step S3, it is determined whether the text overflows by:

[0025] Determine whether the text data volume exceeds the limit, and if so, intercept it to improve rendering efficiency;

[0026] Use the HTML DOM technology in JavaScript to obtain the DOM element of the container, compare its scrollWidth and clientWidth, and scrollHeight and clientHeight. If they are not equal, it means that the text overflows, and a Boolean value is returned;

[0027] If the text overflows and the number of lines attribute is 0, the text is filled according to the container width and height. At this time, the line height is set to a fixed value to accurately calculate the maximum number of display lines. If the line height is not fixed, n times the font size is used as an approximate value.

[0028] Furthermore, in step S3, the method of using CSS to process the text overflow includes:

[0029] Ellipses in the middle of a single line of text: Generate a copy of the text through the pseudo-element ::before, set it to float right and 50% width, and use direction:rtl to achieve the effect of a leading ellipsis.

[0030] Ellipsis at the end of a single line of text: This is achieved using the standard text-overflow:ellipsis style;

[0031] Multi-line text ellipsis: Use -webkit-line-clamp to set the maximum number of lines to be displayed, and use the pseudo-element ::after to generate an ellipsis. For browsers that do not support -webkit-line-clamp, use the pseudo-element to control the position of the ellipsis, and calculate its top attribute to meet the layout requirements of the maximum number of lines.

[0032] Further, in step S4, according to the judgment structure of step S3, determining whether to display a text prompt box includes:

[0033] When the text overflows, a tooltip box is displayed, and the text in the tooltip box can be scrolled with the mouse to display the excess text;

[0034] If the number of words exceeds the limit, the prompt box will use paging and scrolling to load them gradually to avoid loading a large amount of data at one time and affecting performance.

[0035] Furthermore, the present solution discloses an electronic device, including a processor and a memory that is communicatively connected to the processor and is used to store instructions executable by the processor, wherein the processor is used to execute a display processing method for text overflow.

[0036] Furthermore, the present solution discloses a server, comprising at least one processor, and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor performs a display processing method for text overflow.

[0037] Furthermore, the present solution discloses a computer-readable storage medium storing a computer program, wherein the computer program implements a display processing method for text overflow when executed by a processor.

[0038] Compared with the prior art, the display processing method of text overflow described in the present invention has the following advantages:

[0039] Beneficial effects:

[0040] (1) The text overflow display processing method described in the present invention realizes full support for various text overflow scenarios, and has good support for currently missing scenarios, such as single-line overflow and multi-line overflow conversion, real-time response to text overflow events, and slow rendering of large data text overflow;

[0041] (2) A display processing method for text overflow described in the present invention, 2. There is no browser compatibility problem and the burden of resource introduction is small. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The accompanying drawings constituting a part of the present invention are used to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the accompanying drawings:

[0043] Figure 1 It is a schematic diagram of the overall flow chart of the embodiment of the present invention;

[0044] Figure 2 The figure is a schematic diagram of a specific functional flow chart described in an embodiment of the present invention. DETAILED DESCRIPTION

[0045] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments may be combined with each other.

[0046] The present invention will be described in detail below with reference to the accompanying drawings and in conjunction with embodiments.

[0047] In view of the shortcomings of the prior art, the purpose of the present invention is to provide a display processing method for text overflow to solve the problems raised in the above background technology. The present invention mainly uses JavaScript language and CSS cascading style sheets. The present invention can be used in combination with an existing component library. The ElementUI component library will be used as an example below, and the same applies to other component libraries.

[0048] The present invention is not recommended for situations where the functional requirement is to display text in a single line, no text prompt box is required, and the data scale is not large. Because the present invention handles many situations and has complex logic, it will reduce performance. The present invention is more suitable for situations with complex functional requirements. General text overflow can only be handled by styles: white-space:nowrap; (force text not to wrap) overflow:hidden; (content will be trimmed and the rest of the content will not be visible) text-overflow:ellipsis; (display ellipsis symbols to represent trimmed text).

[0049] The present invention is implemented by the following technical solution, which mainly includes the following steps:

[0050] Step 1: Determine the functional requirements based on the attributes. Specific attributes include: the number of text display rows row-num (Number, default is 0, that is, fill according to the width and height), whether to display the text tooltip show-overflow-tooltip (Boolean, default is false), the omission position when the text overflows a single line placement (String, middle, tail, default is tail), the judgment method for when the text exceeds the container trigger-type (affects the display of the text tooltip, see step 2 for details), and the limit (Number, default is 10000).

[0051] Step 2: When the text exceeds the container, the judgment method is triggered. Some operations will affect the width and height of the text display. At this time, it is necessary to re-judge whether the text exceeds the container. For this step, the present invention mainly covers the following situations:

[0052] By default, when the overall height, overall width, and display data are fixed and will not be hidden, step 3 can be executed after the page rendering is completed;

[0053] When the overall height and width are fixed but the displayed data changes or there is a visible-invisible change, step 3 needs to be executed when the displayed data changes, after the component is displayed, or when the user operates. Common trigger events include: mouseenter, drop-down box visible-change, etc.

[0054] When the overall height and width change, monitor the width and height changes of the browser window, or the width and height changes of other DOM elements that affect the text width and height. If the width or height changes, execute step three.

[0055] For events that can be triggered repeatedly in a short time (mouse movement events, browser window width and height change events, DOM element width and height change events), you need to set debounce and throttle to prevent rapid repeated responses from affecting performance. Debounce configures the end boundary and waiting time.

[0056] Step 3: Determine whether the text exceeds the container.

[0057] The amount of text data is judged. If it exceeds the limit, part of it will be cut off according to the maximum number of display lines to increase the rendering speed.

[0058] Use JS HTML DOM technology to obtain the container DOM. If the scrollWidth and clientWidth properties of the DOM object are not equal, or the scrollHeight and clientHeight properties are not equal, it means that the text overflows, and a Boolean value is returned.

[0059] When the text overflows and the number of text display rows row-num is 0, that is, when the width and height are filled, the present invention requires that the line height line-height is preferably a fixed value, because when the line height line-height and other attributes are not fixed values, the maximum number of display rows cannot be accurately calculated, and can only be roughly converted by the relationship that the line height line-height is 1.2 times the font size font-size. Finally, the maximum number of display rows is calculated by Math.floor(element.clientHeight / line-height), which facilitates the CSS in step 4 to achieve the corresponding effect of text overflow.

[0060] Step 4: text style processing. The omission effects of the text in the present invention are all implemented using CSS, and CSS sleight of hand is flexibly used to perform exceeding hiding and hierarchical covering, which is divided into single-line text middle omission, single-line text end omission and multi-line text omission. The style processing of text overflow, when the container width is just at the critical value, is displayed as the text beginning to overflow, but the text does not exceed the container, which will cause the display of the text and the display of the text prompt box to be inconsistent. Therefore, when it is necessary to display the text prompt box, the present invention needs to make a judgment. When the text exceeds the container, the style is applied, otherwise it is not applied.

[0061] Single-line text is omitted in the middle. Use the pseudo-element ::before to generate a copy of the text through content, set it to float right, width 50%, overflow ellipsis, and finally use direction:rtl to achieve the effect of a leading ellipsis.

[0062] When the width and height are not fixed, there may be a situation where multi-line display and single-line display are converted to each other, so the single-line overflow and multi-line overflow processing methods need to be compatible. The familiar multi-line overflow effect setting property -webkit-line-clamp has browser compatibility issues. The following method is used to handle non-webkit kernel browsers. Use the ::after pseudo-element, the attributes {content:'-'; position:absolute; right:0; top:0;}, where the top attribute needs to be calculated based on the maximum number of display lines to form an ellipsis. The outer layer handles the position of the text and the ellipsis by configuring {width:calc(100%-12px); text-align:justify;}.

[0063] Step 5: Text prompt box. According to the result of step 3, determine whether the text prompt box is visible or invisible. If the text exceeds the text prompt box, set the scroll wheel. When the data volume exceeds the limit, the data in the text prompt box will be scrolled and loaded. For details, see step 6.

[0064] Step 6: Load in batches to optimize performance. Before proceeding to step 3, the amount of text data needs to be judged. The present invention makes a judgment based on the number of characters. The default limit is 10,000, which can be set by yourself. If the number exceeds the limit, the limit size is used. This can increase the rendering speed. In step 5, when the amount of data exceeds the limit, it can be scrolled and loaded. ScrollTop and scrollHeight are compared, and the data of the limit size is loaded when the scroll wheel is scrolled to near the bottom.

[0065] Encapsulate steps 3 and 4 in the above solution, receive the parameters of step 1 that are not related to the text prompt box, and return the result of step 3 (Boolean type). The purpose of this method is to decouple and expose it to the outside. New methods can be constructed to call this method, which is applicable to more scenarios.

[0066] At the same time, in the specific implementation process of this solution, the key methods are: triggering the event of text exceeding the container judgment method, text overflow style processing, and loading large amounts of data in batches.

[0067] There are two types of events that trigger the text out of the container judgment method: changes in the width and height of the document or window object, and other event processing functions. By default, it is triggered once when the outer DOM of the text is rendered. Apply nextTick to ensure that it is executed after the rendering is completed.

[0068] When the width or height of the DOM or window object changes and affects the text overflow, in addition to triggering once after the outer DOM rendering of the text is completed, it is also necessary to monitor the width and height of the object in real time. Set ResizeObserver in mounted, set the throttling method, and the waiting time is 200ms.

[0069] Other event triggers directly call the initialization method of the present invention, which has a built-in anti-shake method and adopts tail execution (only the last time of rapid continuous operations is executed). The waiting time is set to 200ms, that is, each operation within 200ms will clear the setTimeout timer set during the last operation, until the last operation is executed when there is no operation.

[0070] Text style processing solves existing compatibility issues and merges multiple requirements. It relies on text overflow judgment and the maximum number of display lines. When text overflows and the number of text display lines row-num is 0, get the line height line-height through getComputedStyle. When the line height is normal, the line height line-height is converted to 1.2 times the font size font-size. The maximum number of display lines is calculated through Math.floor(element.clientHeight / line-height).

[0071] For text omitted in the middle of a single line, set the style of the outer layer of the text to display:block; text-align:justify; process the spacing before and after the text, use the pseudo-element ::before, and dynamically obtain the displayed text through content and attr expression; set float to right; width to 50%; overflow ellipsis (white-space:nowrap; overflow:hidden; text-overflow:ellipsis;); and add an ellipsis in front direction:rtl.

[0072] For the text omitted at the end, when row-num is 1, the general text overflow processing method (white-space:nowrap; overflow:hidden; text-overflow:ellipsis;) is used. In other cases, the following processing is required. First, the number of displayed rows is calculated based on row-num and the maximum number of displayed rows. When row-num is 0, the number of displayed rows is the maximum number of displayed rows, otherwise it is the value of row-num. Then the value of height is determined to be the number of displayed rows multiplied by the row height, and overflow is set to hidden. Secondly, determine whether the browser is a webkit kernel. If it is a webkit kernel, display is set to -webkit-box. -webkit-line-clamp is set to the number of displayed rows. -webkit-box-orient is set to vertical. For browsers without webkit kernels, use the ::after pseudo-element with attributes {content:'…'; position:absolute; right:0;}, and the top attribute value = (number of displayed rows - 1) * row height to form an ellipsis at the end. The outer layer handles the position of text and ellipsis by configuring {width:calc(100%-12px);text-align:justify;}.

[0073] The batch loading of large amounts of data is reflected in two aspects. First, only part of the overflowing text is loaded, which will not affect the display and improve performance. Second, for the text displayed in the text prompt box, scroll loading is adopted. Because the amount of data is large, the scroll bar is compressed very small. When the user slides to the bottom, the loading effect is displayed and the following content is loaded. After loading is completed, the position of the scroll wheel is adjusted without affecting the normal operation of the user. When the text prompt box exists, onscroll is used to determine whether its scroll wheel scrolls down, and the throttling wait time is set to 200ms. The scrollTop attribute of the DOM element is captured to determine whether it is equal to element.scrollHeight. If it is equal, the content in the text prompt box is reassigned, and the scroll wheel position scrollTop is adjusted until all the content is loaded. The scrolling attribute is compatible. After all the data is loaded, the text prompt box is closed and then opened again, and all the data is still displayed. At this time, the loading effect is no longer displayed, and the loading judgment is no longer triggered.

[0074] Those of ordinary skill in the art will appreciate that the units and method steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0075] In the several embodiments provided in the present application, it should be understood that the disclosed methods and systems can be implemented in other ways. For example, the division of the units described above is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. The above-mentioned units may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the embodiments of the present invention.

[0076] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention, and they should all be included in the scope of the claims and specification of the present invention.

[0077] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A display processing method for text overflow, characterized in that: include: S1. Determine the specific requirements for displaying text based on the attributes input by the user; S2, judging whether the text exceeds the container according to different scenarios; S3, judging whether the text overflows, and if so, using CSS to handle the text overflow; S4. According to the judgment structure of step S3, determine whether to display the text prompt box.

2. The method for displaying text overflow according to claim 1, characterized in that: Before executing step S3, it is determined whether the amount of text data exceeds a set limit, and if it exceeds the limit, the text data is intercepted to increase the rendering speed; When the amount of data in the text prompt box exceeds the limit, the scroll loading technology is used to dynamically load a new batch of data by comparing the scrollTop and scrollHeight of the scroll wheel when the scroll wheel approaches the bottom.

3. The display processing method for text overflow according to claim 1, characterized in that: In step S1, the specific requirements include: Number of text display lines: The default value is 0, which means that the text will automatically fill the width and height of the container. If a specific number of lines is set, it will be processed according to the number of lines; Whether to display the prompt box: The default value is false, and the prompt box is only displayed when the text overflows; The ellipsis position when a single line of text overflows: middle ellipsis or end ellipsis, the default value is tail; Method for triggering text overflow judgment: affects the visibility of the prompt box and needs to be used in conjunction with different trigger events in step S2; Limit: The default value is 10000, which indicates the upper limit of the number of characters. Characters exceeding this limit will be truncated to improve performance.

4. The display processing method for text overflow according to claim 1, characterized in that: In step S2, the method for determining whether the text exceeds the container according to different scenarios includes: Static scenario: When the height and width of the container are fixed and the displayed data does not change, overflow detection can be performed after page rendering is completed; Data change scenario: When the height and width of the container are fixed, but the displayed data changes or the components become visible or invisible, overflow judgment needs to be triggered after the data changes, the components are displayed, or when the user operates; Size change scenario: When the height or width of the container changes, monitor its changes and trigger overflow judgment when it changes.

5. The method for displaying text overflow according to claim 1, characterized in that: In step S3, whether the text overflows is determined by: Determine whether the text data volume exceeds the limit, and if so, intercept it to improve rendering efficiency; Use the HTML DOM technology in JavaScript to obtain the DOM element of the container, compare its scrollWidth and clientWidth, and scrollHeight and clientHeight. If they are not equal, it means that the text overflows, and a Boolean value is returned; If the text overflows and the number of lines attribute is 0, the text is filled according to the container width and height. At this time, the line height is set to a fixed value to accurately calculate the maximum number of display lines. If the line height is not fixed, n times the font size is used as an approximate value.

6. The method for displaying text overflow according to claim 5, characterized in that: In step S3, the method of using CSS to process the text overflow includes: Ellipses in the middle of a single line of text: Generate a copy of the text through the pseudo-element ::before, set it to float right and 50% width, and use direction:rtl to achieve the leading ellipsis effect; Ellipsis at the end of a single line of text: This is achieved using the standard text-overflow:ellipsis style; Multi-line text ellipsis: Use -webkit-line-clamp to set the maximum number of lines to be displayed, and use the pseudo-element ::after to generate an ellipsis. For browsers that do not support -webkit-line-clamp, use the pseudo-element to control the position of the ellipsis, and calculate its top attribute to meet the layout requirements of the maximum number of lines.

7. The method for displaying text overflow according to claim 1, characterized in that: In step S4, according to the judgment structure of step S3, determining whether to display a text prompt box includes: When the text overflows, a tooltip box is displayed, and the text in the tooltip box can be scrolled with the mouse to display the excess text; If the number of words exceeds the limit, the prompt box will use paging and scrolling to load them gradually to avoid loading a large amount of data at one time and affecting performance.

8. An electronic device, comprising a processor and a memory connected to the processor for storing instructions executable by the processor, characterized in that: The processor is used to execute a text overflow display processing method as described in any one of claims 1-7.

9. A server, characterized in that: It includes at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes a text overflow display processing method as described in any one of claims 1-7.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the display processing method for text overflow described in any one of claims 1 to 7 is implemented.

Images