Text display method, electronic device and storage medium

Abstract

The present application provides a text display method, electronic device and storage medium, which belongs to the field of data processing technology. The method includes: creating a preset nested container including a first container, a second container, a third container and a fourth container based on the target page, wherein the third container is used to place a retractable button; obtaining the target text, and placing the target text in the second container, wherein the second container adjusts the height to a matching height that matches the target text; calculating whether the matching height exceeds the preset height of the first container through JavaScript; if so, displaying the third container and the fourth container through JavaScript, and adjusting the height of the fourth container to a preset height; adjusting the CSS properties of the second container and the third container respectively, so that the local content of the target text and the retractable button are displayed inside the first container. The present application can improve the partial or full display effect of a long text through the retractable button.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a text display method, electronic device, and storage medium. Background Art

[0002] Amidst the explosive growth of internet content, users face the dual dilemma of information overload and difficulty grasping key information when browsing large amounts of content. Currently, there are two main solutions in the industry: one is a pure CSS (Cascading Style Sheets) solution, which uses the -webkit-line-clamp property to control the number of displayed lines; the other is a pure JavaScript (an interpreted scripting language) solution, which uses each word to determine whether the text overflows the container and adds ellipsis to achieve content truncation.

[0003] However, both solutions have obvious limitations. The pure CSS solution has poor compatibility, especially in IE browsers, and cannot display the expand / collapse button in the lower right corner of the article. Users need to open a new page to view the full content, which greatly affects the user's operational convenience and browsing experience continuity. Although the pure JavaScript solution is more sophisticated in content control, its performance is poor, especially when processing rich text. Since it needs to calculate word-by-word whether the text overflows, it consumes a huge amount of computing resources. The function of displaying the expand / collapse button in the lower right corner of the article is also impossible, which cannot meet the user's needs for flexible control of content display within a limited interface.

[0004] Therefore, there is an urgent need to propose a new multi-line display method to improve the display effect of long texts. Summary of the Invention

[0005] The purpose of this application is to provide a text display method, electronic device and storage medium to solve the above problems.

[0006] To achieve the above objectives, in a first aspect, the present application proposes a text display method, which includes:

[0007] Create a preset nested container based on the target page, the preset nested container including a first container, a second container, a third container, and a fourth container, wherein the first container is a parent container, the second container, the third container, and the fourth container are child containers arranged in the same order, the third container is used to place a retractable button, and the fourth container is a blank container used as a placeholder;

[0008] Acquire a target text, and place the target text in the second container, wherein the second container adjusts its height to a matching height that matches the target text;

[0009] Calculating, by JavaScript, whether the matching height exceeds a preset height of the first container;

[0010] If so, display the third container and the fourth container through JavaScript, and adjust the height of the fourth container to the preset height;

[0011] Based on the fourth container, the CSS properties of the second container and the third container are adjusted respectively, so that the partial content of the target text and the retractable button are displayed inside the first container.

[0012] In some implementations, the CSS property includes margin-top, and adjusting the CSS properties of the second container and the third container based on the fourth container, respectively, so that the partial content of the target text and the retractable button are displayed within the first container, includes:

[0013] Based on the fourth container, adjusting the margin-top of the second container by a negative value to control the display position of the second container so that the partial content of the target text is displayed inside the first container; and

[0014] Based on the fourth container, a negative value is adjusted on the margin-top of the third container to control the display position of the third container so that the retractable button is displayed inside the first container.

[0015] In some embodiments, the value of margin-top of the third container is equal to the height of the third container.

[0016] In some embodiments, after adjusting the CSS properties of the second container and the third container based on the fourth container so that the partial content of the target text and the retractable button are displayed inside the first container, the method further includes:

[0017] When it is detected that the state of the retractable button is changed from retracted to extended, the height of the first container is controlled to switch from a preset height to an automatic height, and the automatic height is related to the matching height of the second container.

[0018] In some embodiments, after controlling the height of the first container to switch from a preset height to an automatic height, the method further includes:

[0019] adjusting the height of the fourth container to the automatic height;

[0020] Based on the fourth container adjusted to the automatic height, the CSS properties of the second container are adjusted to control the display position of the second container, so that the target text is displayed inside the first container.

[0021] In some embodiments, after calculating whether the matching height exceeds the preset height of the first container through JavaScript, the method further includes:

[0022] If not, the third container and the fourth container are not displayed, and the target text is controlled to be displayed in the first container.

[0023] In some embodiments, the protruding portion of the first container is configured to be hidden.

[0024] In some embodiments, the third container is configured to float rightward.

[0025] On the second aspect, in order to achieve the above-mentioned purpose, the present application also proposes an electronic device, comprising: one or more processors; a memory for storing one or more programs, wherein, when the one or more programs are executed by the one or more processors, the one or more processors execute the text display method as described above.

[0026] On the third aspect, in order to achieve the above-mentioned purpose, the present application also proposes a computer storage medium, which stores executable instructions. When the instructions are executed by a processor, the processor executes the text display method described above.

[0027] Compared with the prior art, the advantages of this application include:

[0028] First, the present application displays content by presetting nested containers to ensure that a variety of situations, including content exceeding and content not exceeding, can be handled without changing the container structure. Second, by utilizing a blank fourth container, the content and buttons are naturally arranged at the bottom of the container, and then the target text in the third container and the retractable button in the fourth container are moved up through the CSS properties of the third and fourth containers. At the same time, CSS is used to layout the retractable button at the bottom right of the text, and the content is automatically truncated to leave display space for the retractable button, thereby ensuring that the last word will not be displayed in a half-text state. Third, the present application uses basic JavaScript APIs and CSS styles to avoid the use of incompatible APIs, ensuring adaptability in all webview (a component commonly used in mobile application development) containers, including applets. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope of the present application.

[0030] Figure 1 1 is a flow chart of a text display method according to an embodiment;

[0031] Figure 2 A schematic diagram of preset nested containers in one embodiment;

[0032] Figure 3 is a flowchart of a text display method in another embodiment;

[0033] Figure 4 Schematic diagram of a flow chart of a text display method in another embodiment;

[0034] Figure 5 Schematic diagram of the structure of the electronic device involved in the text display method in the embodiment of the present application. DETAILED DESCRIPTION

[0035] In order to make the purpose, technical solutions and advantages of this application more clearly understood, the present application is further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain this application and are not intended to limit this application.

[0036] All terms (including technical and scientific terms) used in this application have the meanings commonly understood by those skilled in the art, unless otherwise defined. It should be noted that the terms used herein should be interpreted as having a meaning consistent with the context of this specification and should not be interpreted in an idealized or overly rigid manner.

[0037] For example, the terms "first," "second," etc. used in this application may be used herein to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish a first element from another element.

[0038] For example, the terms "include", "comprising", etc. used in this application indicate the existence of features, steps, operations and / or components, but do not exclude the existence or addition of one or more other features, steps, operations or components.

[0039] As mentioned above, amidst the explosive growth of internet content, users face the dual dilemma of information overload and difficulty grasping key information when browsing large amounts of content. Currently, there are two main solutions in the industry: one is pure CSS (Cascading Style Sheets) technology, which uses the -webkit-line-clamp property to control the number of displayed lines; the other is pure JavaScript (an interpreted scripting language), which truncates content by determining word-by-word whether text overflows its container and adding ellipsis. However, both solutions have significant limitations. The pure CSS solution suffers from poor compatibility, particularly in Internet Explorer, and lacks the ability to display the expand / collapse button in the bottom right corner of the article, forcing users to open a new page to view the full content. This significantly impacts user convenience and browsing experience continuity. The pure JavaScript solution, while offering more granular content control, suffers from poor performance, particularly when processing rich text. The need to calculate word-by-word whether text overflows consumes significant computing resources, and the ability to display the expand / collapse button in the bottom right corner of the article is also impossible. Consequently, it fails to meet users' needs for flexible content display within a limited interface. Therefore, it is urgent to propose a new multi-line display method to improve the display effect of long text. To this end, this application proposes a text display method, electronic device and storage medium, which can improve the partial or full display effect of long text through a retractable button.

[0040] like Figure 1 and Figure 2 As shown, an embodiment of the present application provides a text display method, which includes the following steps:

[0041] Step S10: creating a preset nested container based on the target page.

[0042] In this embodiment, the target page refers to a page on an electronic device that displays text content, such as a webpage or mobile application interface. A preset nested container refers to an HTML (Hypertext Markup Language) container element created with a pre-designed structure and style to hold text content and related operational elements (such as a retractable or expandable button). Each container element has initialized CSS styles.

[0043] The preset nested containers include a first container, a second container, a third container, and a fourth container. The first container is the parent container, and the second, third, and fourth containers are child containers arranged in order at the same level. The third container is used to hold the expand / contract button, and the fourth container is a blank container used as a placeholder. The first container (parent container) is the outermost container in the page layout, used to define the display area for text content and related operational elements. The portion exceeding the first container is hidden (the overflow property of the first container is set to hidden). The second, third, and fourth containers (parallel child containers) are child container elements directly associated with the same parent container and are at the same level in the page layout. The second container is used to hold the target text. The third container (for the expand / contract button) is a child container specifically used to hold the button that controls the expansion or collapse of text. In some embodiments, the third container is set to float right. The fourth container (blank container used as a placeholder) is a blank child container that is not used to directly display text or buttons but is used to assist in layout. In the initial state, the first container and the second container are set to be displayed, and the third container and the fourth container are set to be hidden.

[0044] For example, you can use HTML Tags create preset nested containers and use CSS for styling and layout control. For example:

[0045] Create a parent container .

[0046] Create three equal sub-containers in the parent container: (for placing text), <button class="toggle-button"> Close< / button> (for placing the retract button) and<divclass="placeholder-container"> (Used as a placeholder).

[0047] Through step S10, the basic framework of the entire text display layout is constructed, providing container support for the subsequent placement and operation of the target text.

[0048] Step S20: Acquire the target text and place the target text in the second container.

[0049] In this embodiment, the target text refers to the text content to be displayed on the target page. It can be rich text content containing various formats (such as font, color, size, bold, italic, underline, images, links, etc.). Placing the target text in the second container means adding the target text to the HTML element of the second container, making it a child element of the container. In this case, the second container automatically adjusts its height to match the target text.

[0050] In some implementations, the text content may be obtained by JavaScript code (eg, obtained from a server or read from local storage), and then the text may be added to the second container using DOM operations.

[0051] For example, a method such as fetch or axios can be used to request a server API to obtain the target text, and the text content of the obtained target text is assigned to the "textContent" or "innerHTML" attribute of the second container.

[0052] In some embodiments, when acquiring a target text, an estimated content size (e.g., total word count, total line count, or file size) of the target text is obtained. If the estimated content size exceeds a preset content size, it can be determined that the target text cannot be displayed in its entirety on the target page and only a portion thereof. Therefore, a segmented acquisition strategy is employed to acquire the target text content. The preset content size is determined based on the display limitations of the target page (e.g., maximum displayable word count or height).

[0053] Step S30: Calculate via JavaScript whether the matching height exceeds the preset height of the first container. If so, execute step S40; otherwise, execute step S90.

[0054] In this embodiment, the matched height refers to the height of the second container automatically adjusted based on the target text content. The preset height refers to the pre-set height of the first container, which is used to limit the display area of ​​the text content. JavaScript is an interpreted dynamic scripting language commonly used in web development to implement dynamic interactive features on web pages. JavaScript code is used to obtain the height attributes of the first and second containers and perform a comparison operation to determine whether the matched height exceeds the preset height.

[0055] In some implementations, in JavaScript code, the height of the container can be obtained using a DOM attribute such as offsetHeight.

[0056] Exemplarily, obtain the matching height of the second container: const textHeight = textContainer.offsetHeight;

[0057] Get the preset height of the first container: const parentHeight = parentContainer.offsetHeight;

[0058] Compare the two heights: if (textHeight>parentHeight) { / Perform the corresponding operation / }.

[0059] Through step S30 , it can be determined whether the text content of the target text exceeds the display area of ​​the first container, thereby determining whether the retracting button and related operations need to be displayed.

[0060] Step S40: display the third container and the fourth container through JavaScript, and adjust the height of the fourth container to the preset height.

[0061] In this embodiment, if the matching height exceeds the preset height, the third container (retractable button) and the fourth container (placeholder container) are changed from a hidden state to a visible state on the target page, and the height attribute of the fourth container is set according to the preset height.

[0062] In some implementations, JavaScript DOM manipulation methods may be used to control the display and hiding of elements, as well as to set the height of elements.

[0063] For example, the third and fourth containers are displayed: toggleButton.style.display = 'block';, placeholderContainer.style.display = 'block';

[0064] Adjust the height of the fourth container: placeholderContainer.style.height = parentHeight + 'px'.

[0065] Step S50: Based on the fourth container, the CSS properties of the second container and the third container are adjusted respectively, so that the partial content of the target text and the retractable button are displayed inside the first container.

[0066] In this embodiment, based on the properties of the fourth container (such as the height of the fourth container), the CSS properties of the second container and the third container are adjusted respectively, so that the local content of the target text and the retractable button are displayed inside the first container, where the CSS properties refer to properties used to control the style of page elements, such as margin-top, position, etc.

[0067] In some embodiments, step S40 includes:

[0068] Step S41 : Based on the fourth container, adjust the margin-top of the second container to a negative value to control the display position of the second container so that the partial content of the target text is displayed inside the first container.

[0069] In this embodiment, margin-top is a CSS property used to set the top margin of an element, that is, the distance between the element and other elements. By adjusting the margin-top value, the position of the element on the page can be changed. Setting the margin-top property to a negative value can move the element upward.

[0070] In step S41 , by adjusting the margin-top of the second container to a negative value, the second container can be controlled to move upward so that part of its content is displayed in the first container (parent container), thereby achieving a partial display effect of the text.

[0071] Step S42: Based on the fourth container, adjust the margin-top of the third container to a negative value to control the display position of the third container so that the retractable button is displayed inside the first container.

[0072] Similarly, in this embodiment, in step S42, by adjusting the margin-top of the third container to a negative value, the third container can be controlled to move upward, so that the built-in retractable button is displayed within the first container (parent container), usually in the lower right corner of the first container.

[0073] In some embodiments, the margin-top value of the third container is equal to the height of the third container. When the margin-top value of the third container is equal to its own height, the third container will move upward completely by its own height. Assuming that the height of the third container is 20px, if its margin-top is set to -20px, the third container will move upward by 20px, thus visually completely detaching from its original position. By moving the third container upward by its own height, the third container can be partially overlapped on the content of the second container, thereby providing a clear boundary for truncation of article content in the page layout.

[0074] If overflow:hidden is set for the first container (the excess portion is set to hidden), when the article content in the second container exceeds the height of the first container, the excess portion will be hidden. This specific margin-top setting of the third container ensures that the article content will be automatically truncated when it encounters the bottom edge of the third container during typesetting, and will not be obscured by the third container. The browser's typesetting engine will ensure that the text is not split, that is, the last visible word is a complete word, not half a word, thus achieving the effect of automatic text truncation without the appearance of half-word display.

[0075] In some implementations, after step S30, the method further includes: step S90, not displaying the third container and the fourth container, and controlling the target text to be displayed in the first container.

[0076] That is, when the matching height does not exceed the preset height, the third container (retractable button) and the fourth container (placeholder container) are kept hidden, and the target text is ensured to be fully displayed within the preset height of the first container.

[0077] In the text display method proposed in the embodiment of the present application, on the one hand, the present application displays content by presetting nested containers, ensuring that various situations in which the content exceeds the limit and the content does not exceed the limit can be handled without changing the container structure. On the other hand, by utilizing a blank fourth container, the content and buttons are naturally arranged at the bottom of the container, and then the target text in the third container and the retractable button in the fourth container are moved up through the CSS properties of the third and fourth containers. At the same time, the retractable button is arranged at the bottom right of the text using CSS, and the content is automatically truncated to leave display space for the retractable button, thereby ensuring that the last word will not be displayed in a half-text state. On the third hand, the present application adopts basic JavaScript APIs and CSS styles to avoid the use of incompatible APIs, ensuring adaptability in all webview (a component commonly used in mobile application development) containers, including applets, etc.

[0078] In one embodiment, Figure 3 As shown, another text display method is provided, which, after step S50, further includes:

[0079] Step S60: When it is detected that the state of the retractable button is changed from retracted to extended, the height of the first container is controlled to switch from a preset height to an automatic height, where the automatic height is related to the matching height of the second container.

[0080] In this embodiment, the state transition of the retractable button refers to the state of the button changing from "folded" to "expanded," or vice versa, when the user clicks the retractable button. The height switching of the first container refers to the switching of the first container's height between a preset height (an initial fixed height) and an automatic height (a height that automatically adjusts based on the content). The automatic height setting means that the height of the first container automatically adjusts based on the amount of target text content, without being restricted by a fixed height.

[0081] In some embodiments, as Figure 4 As shown, another text display method is provided, which further includes, after step S60:

[0082] Step S70: adjusting the height of the fourth container to the automatic height.

[0083] In this embodiment, the height of the fourth container is dynamically adjusted according to the current height of the first container, that is, the height of the fourth container is adjusted to the current automatic height of the first container.

[0084] Step S80: Based on the fourth container adjusted to the automatic height, the CSS properties of the second container are adjusted to control the display position of the second container so that the target text is displayed inside the first container.

[0085] Through step S80 , the CSS properties of the second container can be recalculated and set according to the new height of the fourth container to ensure that the content is displayed correctly.

[0086] The text display method proposed in the embodiment of the present application dynamically adjusts the height of the container. On the one hand, it can dynamically adapt to changes in content to ensure that the page layout remains coordinated regardless of how the content length changes. On the other hand, during the expansion and collapse process, the page layout can smoothly transition, avoiding interference to the user's vision caused by abrupt changes in content. On the third hand, it avoids page jumps caused by viewing the complete content, reduces page loading time and the number of server requests, and improves the overall performance of the application. On the fourth hand, the present application provides a general dynamic content display mechanism that can be reused in different pages and modules, reducing development workload. In addition, through clear logic and structure, the code is easy to understand and maintain, which facilitates subsequent functional expansion and optimization.

[0087] In one embodiment, a computer storage medium is provided, on which executable instructions are stored. When the instructions are executed by a processor, the processor executes the steps in the above-mentioned method embodiments.

[0088] In one embodiment, an electronic device is provided, comprising one or more processors and a memory storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors perform the steps of the aforementioned method embodiments. For example, the electronic device may be any device such as the aforementioned thermal management device or computing service device.

[0089] In one embodiment, Figure 5 , which shows a schematic diagram of the structure of an electronic device for implementing an embodiment of the present application. Electronic device 500 includes a central processing unit (CPU) 501, which can perform various appropriate actions and processes based on programs stored in a read-only memory (ROM) 502 or programs loaded from a storage unit 508 into a random access memory (RAM) 503. RAM 503 also stores various programs and data required for the operation of electronic device 500. CPU 501, ROM 502, and RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to bus 504.

[0090] The following components are connected to the I / O interface 505: an input section 506 including a keyboard, mouse, and the like; an output section 507 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and speakers; a storage section 508 including devices such as a hard disk; and a communication section 509 including a network interface card such as a LAN card or a modem. The communication section 509 performs communication processing via a network such as the Internet. A drive 510 is also connected to the I / O interface 505 as needed. Removable media 511, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 510 as needed, so that computer programs read from the removable media can be installed in the storage section 508 as needed.

[0091] In particular, according to embodiments of the present application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of the present application include a computer program product comprising a computer-readable medium carrying instructions. In such embodiments, the instructions can be downloaded and installed from a network via communication portion 509 and / or installed from removable media 511. When the instructions are executed by central processing unit (CPU) 501, the various method steps described in this application are performed.

[0092] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application 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 make equivalent replacements for some or all of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present application.

[0093] Furthermore, those skilled in the art will appreciate that although some embodiments herein include certain features included in other embodiments but not others, combinations of features from different embodiments are intended to be within the scope of this application and to form different embodiments. For example, any of the above-claimed embodiments may be used in any combination. The information disclosed in this background section is intended solely to enhance understanding of the overall background of this application and should not be construed as an admission or any form of implication that such information constitutes prior art known to those skilled in the art.

Claims

1. A text display method, characterized in that: The method includes: Create a preset nested container based on the target page, the preset nested container including a first container, a second container, a third container, and a fourth container, wherein the first container is a parent container, the second container, the third container, and the fourth container are child containers arranged in the same order, the third container is used to place a retractable button, and the fourth container is a blank container used as a placeholder; Acquire a target text, and place the target text in the second container, wherein the second container adjusts its height to a matching height that matches the target text; Calculating, by JavaScript, whether the matching height exceeds a preset height of the first container; If so, display the third container and the fourth container through JavaScript, and adjust the height of the fourth container to the preset height; Based on the fourth container, adjusting the CSS properties of the second container and the third container respectively so that the partial content of the target text and the retractable button are displayed inside the first container; When detecting that the state of the retractable button changes from retracted to extended, controlling the height of the first container to switch from a preset height to an automatic height, where the automatic height is related to a matching height of the second container; adjusting the height of the fourth container to the automatic height; Based on the fourth container adjusted to the automatic height, the CSS properties of the second container are adjusted to control the display position of the second container, so that the target text is displayed inside the first container.

2. The text display method according to claim 1, wherein: The CSS property includes margin-top, and adjusting the CSS properties of the second container and the third container based on the fourth container so that the partial content of the target text and the retractable button are displayed inside the first container includes: Based on the fourth container, adjusting the margin-top of the second container by a negative value to control the display position of the second container so that the partial content of the target text is displayed inside the first container; and Based on the fourth container, a negative value is adjusted on the margin-top of the third container to control the display position of the third container so that the retractable button is displayed inside the first container.

3. The text display method according to claim 2, characterized in that: The value of margin-top of the third container is equal to the height of the third container.

4. The text display method according to claim 1, wherein: After calculating whether the matching height exceeds the preset height of the first container through JavaScript, the method further includes: If not, the third container and the fourth container are not displayed, and the target text is controlled to be displayed in the first container.

5. The text display method according to claim 1, wherein: The protruding portion of the first container is configured to be hidden.

6. The text display method according to claim 1, wherein: The third container is set to float right.

7. An electronic device, characterized in that: include: one or more processors; a memory for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors are enabled to execute the text display method according to any one of claims 1 to 6.

8. A computer storage medium, characterized in that The storage medium stores executable instructions, and when the instructions are executed by a processor, the processor executes the text display method according to any one of claims 1 to 6.

Images