Text display method, device and storage medium

Abstract

The present application discloses a text display method, device and storage medium, which relate to the field of data processing technology. The above method first determines the container height of the first element container, as well as the font size and text line height of all texts in the first element container; then, determines the comparison result of the product of the font size and the text line height and the container height; if the container height is less than the product of the font size and the text line height, then the number of display lines is determined based on the container height, and the text to be displayed is determined in the second element container based on the number of display lines, and the style attribute of the text to be displayed is controlled to be displayed, and the style attribute of other texts in the second element container except the text to be displayed is controlled to be hidden. This method dynamically determines whether the text needs to be folded by comparing the theoretical height of the text, that is, the product of the font size and the line height, with the container height. It can determine the display method according to the actual container height and text style, and enhance the adaptability in dynamic environments.

Description

Technical Field

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

[0002] When displaying text on a page, if the text content exceeds a certain length, the "-webkit-line-clamp" technology is usually used to preset a display line number to limit the display area. That is, through the private characteristics of the WebKit browser engine, the text is forced to be limited to the specified number of lines, and an ellipsis is displayed when it exceeds the limit. However, the above method is often not flexible enough when facing dynamically changing container environments, such as application interfaces with different screen sizes on different devices. For example, when the web page window is relatively large, the limit on the number of lines may result in too little text being displayed, and too much blank area appears below, which affects the visual effect of the text. Therefore, the current text display method has poor adaptability in dynamic environments.

[0003] The above content is only used to assist in understanding the technical solution of this application and does not constitute an admission that the above content is prior art. Summary of the Invention

[0004] The main purpose of this application is to provide a text display method, device and storage medium, aiming to solve the technical problem that the current text display method has poor adaptability in dynamic environments.

[0005] To achieve the above objectives, the present application proposes a text display method, which includes:

[0006] Determine the container height of the first element container, and the font size and text line height of all text in the first element container;

[0007] Determine a comparison result of the product of the font size and the text line height and the height of the container;

[0008] If the height of the container is less than the product of the font size and the text line height, determining the number of display lines based on the height of the container;

[0009] Based on the number of display rows, the text to be displayed is determined in the second element container, the style attribute of the text to be displayed is controlled to be displayed, and the style attribute of other texts in the second element container except the text to be displayed is controlled to be hidden, wherein the text in the first element container is consistent with the text in the second element container.

[0010] In one embodiment, after the step of determining the comparison result of the product of the font size and the text line height with the container height, the method further includes:

[0011] If the container height is greater than or equal to the product of the font size and the text line height, after all the text in the second element container is used as the text to be displayed, the style attribute of the text to be displayed is controlled to be display.

[0012] In one embodiment, the second element container further includes an ellipsis element and a button element, wherein the button element is a block-level element.

[0013] In one embodiment, after the step of controlling the style attribute of the text other than the to-be-displayed text in the second element container to be hidden, the method further includes:

[0014] Determining a horizontal positioning reference point of the ellipsis element according to a character baseline position and a character logical width of the last character in the displayed text;

[0015] Determining a rendering position of the ellipsis element based on the horizontal positioning reference point;

[0016] The ellipsis element is rendered according to the rendering position of the ellipsis element, so that the ellipsis element is displayed at the end of the text to be displayed.

[0017] In one embodiment, the step of determining the rendering position of the ellipsis element based on the horizontal positioning reference point further includes:

[0018] Determining the vertical baseline offset of the ellipsis element according to the line height and font size of the last character;

[0019] Determining a vertical positioning reference point of the ellipsis element according to the character baseline position of the last character and the vertical baseline offset;

[0020] The rendering position of the ellipsis element is determined according to the horizontal positioning reference point and the vertical positioning reference point.

[0021] In one embodiment, after the steps of determining the text to be displayed in the second element container based on the number of display rows, controlling the style attribute of the text to be displayed to display, and controlling the style attribute of other text in the second element container except the text to be displayed to hide, the method further includes:

[0022] In response to a click action of the button element, the style attributes of the texts other than the to-be-displayed text in the second element container are controlled to be displayed, and the style attribute of the ellipsis element is controlled to be hidden.

[0023] In one embodiment, the step of determining the text to be displayed in the second element container based on the number of display lines further includes:

[0024] In response to a hovering action of a cursor over the ellipsis element, displaying a floating preview window;

[0025] Rendering other texts in the second element container except the to-be-displayed text in the floating preview window.

[0026] In one embodiment, the step of rendering other text in the second element container except the to-be-displayed text in the floating preview window includes:

[0027] Extracting entity words from the other texts, and determining the fields to which the other texts belong based on the entity words;

[0028] Determining subject terms based on the fields to which the other texts belong;

[0029] Performing iterative topic clustering on the other texts according to the topic terms using a topic clustering algorithm to obtain a topic cluster;

[0030] Determining the weight of the keyword according to the number of occurrences and entity types of the keyword in the topic cluster, and determining the topic keyword in each of the topic clusters according to the weight of the keyword;

[0031] A text theme is generated according to the theme keywords in each of the theme clusters, and the text theme is rendered and displayed in the floating preview window.

[0032] In addition, to achieve the above-mentioned purpose, the present application also proposes a text display device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the text display method described above.

[0033] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium. A computer program is stored on the storage medium, and when the computer program is executed by the processor, the steps of the text display method described above are implemented.

[0034] The present application provides a text display method, which first determines the container height of a first element container, as well as the font size and text line height of all text in the first element container; then, determines the comparison result of the product of the font size and the text line height and the container height; if the container height is less than the product of the font size and the text line height, then determines the number of display lines based on the container height, determines the text to be displayed in a second element container based on the number of display lines, controls the style attribute of the text to be displayed to display, and controls the style attribute of other texts in the second element container except the text to be displayed to be hidden, wherein the text in the first element container is consistent with the text in the second element container. This method dynamically determines whether the text needs to be folded by comparing the theoretical height of the text, that is, the product of the font size and the line height, with the container height. It can determine the display method according to the actual container height and text style, thereby enhancing adaptability in dynamic environments. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0036] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0037] Figure 1 A flowchart of the first embodiment of the present invention is provided.

[0038] Figure 2 A flowchart of the second embodiment of the method for displaying text in this application is provided;

[0039] Figure 3 This is a schematic diagram showing the effect of the second embodiment of the text display method of this application;

[0040] Figure 4 Schematic diagram of the device structure of the hardware operating environment involved in the text display method in the embodiment of the present application.

[0041] The purpose, features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0042] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not intended to limit the present application.

[0043] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0044] When displaying text on a page, if the text content exceeds a certain length, the "-webkit-line-clamp" technology is usually used to preset a display line number to limit the display area. That is, through the private characteristics of the WebKit browser engine, the text is forced to be limited to the specified number of lines, and an ellipsis is displayed when it exceeds the limit. However, the above method is often not flexible enough when facing dynamically changing container environments, such as application interfaces with different screen sizes on different devices. For example, when the web page window is relatively large, the limit on the number of lines may result in too little text being displayed, and too much blank area appears below, which affects the visual effect of the text. Therefore, the current text display method has poor adaptability in dynamic environments.

[0045] In view of the above problems, the present application proposes a text display method, which first determines the container height of the first element container, as well as the font size and text line height of all the text in the first element container; then, determines the comparison result of the product of the font size and the text line height and the container height; if the container height is less than the product of the font size and the text line height, then determines the number of display lines based on the container height, determines the text to be displayed in the second element container based on the number of display lines, controls the style attribute of the text to be displayed to display, and controls the style attribute of other texts in the second element container except the text to be displayed to be hidden, wherein the text in the first element container is consistent with the text in the second element container. This method dynamically determines whether the text needs to be folded by comparing the theoretical height of the text, that is, the product of the font size and the line height, with the container height. It can determine the display method according to the actual container height and text style, thereby enhancing adaptability in dynamic environments.

[0046] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication and program running functions, such as a tablet computer, personal computer, mobile phone, etc., or an electronic device that can realize the above functions.

[0047] Based on this, the first embodiment proposed in this application provides a text display method, referring to Figure 1 In this embodiment, the text display method includes steps S10 to S40:

[0048] Step S10: determining the container height of the first element container, and the font size and text line height of all text in the first element container.

[0049] It should be noted that an element container is an HTML element used to carry text content, and can be a div element, an article element, an aside element, etc. In this embodiment, the div element is taken as an example and used as an element container to wrap and organize text content so as to perform style setting, layout control, and interactive processing on the text.

[0050] For example, after the DOM element is loaded, JavaScript is used to obtain the actual height of the first element container and the font size and line height of all text in the first element container. A DOM element is the basic unit in the Document Object Model (DOM), representing every element in a web page. In the DOM tree, a div element is represented as a DOM element node, hereinafter referred to as a "div node."

[0051] For example, by accessing the "offsetHeight" property of a div node through JavaScript, this property can return the height of the div element relative to the viewport of the mini-program interface, including padding and borders.

[0052] If the text in the first element container all uses the same style, that is, the text font size and line height are the same, you can get the text font size by accessing the "style.fontSize" property of the div node, and get the text line height by accessing the "style.lineHeight" property of the div node.

[0053] If the text styles within the first element container are inconsistent, you can traverse the child text nodes within the div node and retrieve the computed style of each child text node using getComputedStyle. This computed style can then be used to obtain the corresponding text size and line height. Optionally, create two objects to store the font size and line height values ​​for each child text node within the container.

[0054] Through the above method, the container height of the first element container, as well as the font size and text line height of all text in the first element container can be accurately obtained, providing data support for subsequent text display logic.

[0055] Step S20: Determine a comparison result between the product of the font size and the text line height and the height of the container.

[0056] In this embodiment, the product of the font size and the text line height is calculated and compared with the container height to determine whether the text content needs to be omitted and displayed in the second container.

[0057] For example, if the text in the first element container all uses the same style, the value of the accessed "style.fontSize" property is directly multiplied by the value of the "style.lineHeight" property, and the result is compared with the container height. If the text in the first element container has different styles, the product of the font size and line height of each child text node can be calculated, and then all these products can be added together before comparing with the container height.

[0058] Step S30: If the height of the container is smaller than the product of the font size and the text line height, the number of display lines is determined based on the height of the container.

[0059] Step S40: Determine the text to be displayed in the second element container based on the number of display rows, control the style attribute of the text to be displayed to be displayed, and control the style attribute of other texts in the second element container except the text to be displayed to be hidden, wherein the text in the first element container is consistent with the text in the second element container.

[0060] When the container height is less than the product of the font size and the text line height, the theoretical height of the text is greater than the container height. In this case, the text content to be displayed can be dynamically selected based on the container height. This ensures that the text is displayed appropriately within the container to avoid overcrowding the display interface.

[0061] Exemplarily, the ratio of the container height of the first element container to the text line height is calculated, and the ratio is used as the number of display lines. Based on the number of display lines, the corresponding number of lines of text to be displayed are intercepted in the second element container for display, and CSS (Cascading Style Sheets) properties such as "visibility:hidden" are used to temporarily hide the excess text. Optionally, you can also choose to set its style property to "display:none" to achieve the effect of rendering only the text to be displayed to the page. The method of intercepting text can use any one of "split", "slice" and "join".

[0062] Specifically, when parsing HTML, the display device constructs a DOM tree containing all elements in the HTML, including text elements with display:none set. After building the CSSOM (Cascading StyleSheets Object Model) tree, the rendering tree generation phase filters out text elements with "display:none", so these text elements do not participate in layout and rendering. During layout calculations, since these elements are not in the rendering tree, they do not affect the positioning and size of other elements. The rendering phase also skips these elements and does not generate any pixel data, thereby achieving the effect of hiding the text elements. Text elements with the style attribute "visibility:hidden" remain in the DOM tree and the rendering tree. These elements are processed during the rendering phase, generating blank pixel data, but are not actually displayed, to achieve a temporary hiding effect.

[0063] Optionally, if the container height is greater than or equal to the product of the font size and the text line height, after all the text in the second element container is used as the text to be displayed, the style attribute of the text to be displayed is controlled to display.

[0064] When the container height is greater than or equal to the product of the font size and the text line height, it means that the text content can be fully displayed in the container and it is determined that there is no need to fold the content or restrict the display. At this time, the entire text content is directly presented so that the user can directly see the entire text.

[0065] It's understandable that in traditional rich text displays, the current method for limiting displayed text is typically achieved through the "-webkit-line-clamp" technology. This utilizes a private feature of the WebKit browser engine, using the "-webkit-line-clamp" parameter to force text to be limited to a specified number of lines, automatically rendering ellipsis if the number exceeds. At the same time, the "overflow:hidden" parameter creates a clipping region to hide text that exceeds the specified number of lines.

[0066] In this embodiment, two element containers are set up, and the text content in the two element containers is consistent. Among them, the first element container is loaded with text and is only used for calculation, while the second element container is used to render and display text. This design of separating calculation and rendering tasks can make the code structure clearer, and the calculation logic and rendering logic are clearly separated, thereby enhancing the maintainability of the code. In addition, unlike the traditional solid-state style setting based on the number of lines specified by the user, this embodiment performs real-time calculations based on the element container and text. By comparing the theoretical height of the text, that is, the product of the font size and the line height, with the container height, it is dynamically determined whether the text needs to be folded, and the display text is dynamically selected according to the actual container height and text style. This dynamic adjustment method can be achieved directly by modifying the JS (JavaScript) code to edit the style attribute parameters of the text element. It can be applied to various mobile and desktop devices, enhancing adaptability in dynamic environments.

[0067] Based on the above embodiments of the present application, in a second embodiment of the present application, the second element container further includes an ellipsis element and a button element, wherein the button element is a block-level element.

[0068] It's important to note that block-level elements are the fundamental building blocks of a webpage's vertical layout. By default, they stack vertically within the document flow, meaning each block-level element occupies its own line, with subsequent elements starting on a new line. When only partial text is displayed on a page, a button can be displayed below the text to allow users to expand the full text. This intuitively prompts users to click to view more content. This button can be something like "Expand" text or a down arrow icon.

[0069] When the button element is a block-level element, that is, its style is set to "display:block", the rendering engine will immediately close the current text line box after rendering the text element and the ellipsis element, and start rendering the button in a new line.

[0070] Understandably, the current method for limiting displayed text is typically implemented using the "-webkit-line-clamp" technique. This utilizes a private feature of the WebKit browser engine, using the "-webkit-line-clamp" parameter to force text to a specified number of lines, automatically rendering ellipsis if the line exceeds the specified number. Furthermore, the "overflow:hidden" parameter creates a clipping region to hide text beyond the specified number of lines. However, this automatic hiding method is not compatible with different operating systems.

[0071] For example, the Android system has a more relaxed implementation of "-webkit-line-clamp" because the Android system's WebKit kernel uses a line height merging algorithm. This means that when text line heights are inconsistent, such as when Chinese and English are mixed, the container height automatically merges the minimum line height of all lines. Android also allows the container height to dynamically adapt when text is truncated. Even if the content does not fill the specified number of lines, the container height will automatically shrink based on the actual content. The Android system also has more relaxed requirements for text baseline alignment, allowing ellipsis to automatically adjust its position based on the baseline at the end of the text. Therefore, the text display method based on "-webkit-line-clamp" is more compatible in Android.

[0072] However, the iOS system strictly follows the CSS specifications, accumulating the actual line height line by line, and the iOS system's "-webkit-line-clamp" requires that the container height must be strictly calculated by multiplying the number of lines by the line height. When the text line heights are inconsistent, such as when Chinese and English are mixed, the actual height of the container will be 1 to 2 pixels higher than expected. In addition, when the iOS system's WebKit automatically hides the excess text, it will default to aligning the elements in the container downward, causing the actual position of the ellipsis to be lower than expected, resulting in a position offset, which in turn leads to abnormal visual performance such as the ellipsis overlapping with the text or the misalignment of interactive controls.

[0073] On this basis, please refer to Figure 2 After step S40, the text display method further includes steps S50 to S70:

[0074] Step S50 : determining a horizontal positioning reference point of the ellipsis element according to the character baseline position and the character logical width of the last character in the displayed text.

[0075] Step S60: determining a rendering position of the ellipsis element based on the horizontal positioning reference point.

[0076] Step S70: Render the ellipsis element according to the rendering position of the ellipsis element, so that the ellipsis element is displayed at the end of the text to be displayed.

[0077] It should be noted that the baseline is a virtual reference line that determines the vertical alignment of characters. For example, for the Latin alphabet system, the baseline is an invisible reference line extending from the bottom of the letter; in Chinese typesetting, the baseline usually corresponds to the bottom edge of the Chinese character block. In element rendering, the baseline position of each character determines its vertical alignment within the line. During the text element rendering process, the baseline position of each text line takes the starting anchor point of the line, such as the lower left corner of the first character in the line, as the origin. As characters are rendered one by one, the baseline position of each character increases along the horizontal axis. The logical width of a character (advance width) refers to the logical width of the character in the horizontal direction, including the width of the character itself plus the spacing on the right, that is, the pixel width actually occupied by the character graphic and the spacing from the right side of the character body to the starting point of the baseline of the next character.

[0078] For example, when rendering the last character of a text, the rendering engine obtains the character baseline position x and the character logical width of the last character. The right edge coordinate of the last character is calculated as follows: x_end = character baseline position x + character logical width. The right edge coordinate x_end of the last character is then used as the horizontal positioning reference point for the ellipsis element.

[0079] Through the above steps, the rendering position of the ellipsis element can be determined according to the position of the last character in the text to be displayed, and the ellipsis element can be accurately displayed at the end of the text.

[0080] Optionally, in order to further ensure the vertical offset of the ellipsis element and avoid it blocking other elements, the vertical positioning reference point can be further determined based on the determination of the horizontal positioning reference point. On this basis, step S60 includes steps S61 to S63:

[0081] Step S61: Determine the vertical baseline offset of the ellipsis element according to the line height and font size of the last character.

[0082] Step S62: determining a vertical positioning reference point of the ellipsis element according to the character baseline position of the last character and the vertical baseline offset.

[0083] Exemplarily, by reading the "font_size" and "line_height" of the CSS corresponding to the last character, the font size and line height of the last character are obtained. Among them, "font_size" represents the base height of the character, which usually corresponds to the unit square size of the font file. For example, a font-size of 16px means that the main body of the character is designed to occupy a height of 16 pixels. "line_height" refers to the vertical height of the text line box (Line Box), that is, the vertical distance between the baselines of two lines of text. When "line_height" > font_size, additional vertical space will be generated in the line box. Therefore, the vertical offset of the character baseline of the last character in the line box to the bottom of the line box can be determined by the difference between the line height and the font size of the last character: baseline_offset=(line_height The vertical offset is used as the vertical baseline offset of the ellipsis element, which is used to accurately control the vertical alignment of elements such as the ellipsis and determine the vertical positioning reference point of the ellipsis element: y_end = character baseline position x + baseline_offset.

[0084] Step S63: Determine the rendering position of the ellipsis element according to the horizontal positioning reference point and the vertical positioning reference point.

[0085] After determining the horizontal and vertical positioning reference points of the ellipsis element, the ellipsis element can be accurately rendered at the end of the last character of the text.

[0086] For example, set the "position" in the CSS property of the ellipsis element to "relative". Set "left" to "x_end Ellipsis element width", set "vertical-align" to "y_end", write the above CSS property data after setting to the render object (RenderObject) to render the ellipsis element according to the above parameters.

[0087] It is understandable that the traditional "-webkit-line-clamp" method limits the number of lines through the CSS private property "display:-webkit-box", triggering the browser's built-in truncation logic. The horizontal positioning depends on the text container width and the number of lines. When the line heights of the text characters in the text container are inconsistent, it is easy to cause misalignment, such as Figure 3 As shown in Example 1 in . This embodiment detects text changes through JS and calculates coordinates in real time. It is compatible with various browsers and correctly renders the ellipsis element at the end of the text to be displayed to avoid dislocation, as shown in Figure 3 As shown in Example 2 in .

[0088] Optionally, when all text in the second element container is displayed on the page as to-be-displayed text, the style attributes of the ellipsis element and the button element are controlled to be hidden. For example, the "display" attribute of the ellipsis element and the button element can be set to "none" or the "visibility" attribute can be set to "hidden" through CSS style, or the "style" attribute can be manipulated through JavaScript to make them hidden.

[0089] Based on the above embodiments of the present application, in the third embodiment of the present application, the same or similar contents as those in the above embodiments can be referred to above and will not be described in detail later. On this basis, after step S40, the text display method further includes: in response to a click action of the button element, controlling the style attributes of other texts in the second element container except the text to be displayed to be displayed, and controlling the style attributes of the ellipsis element to be hidden.

[0090] For example, when the user clicks the "expand" button, the previously hidden text content is displayed, allowing the user to read the entire information. For example, JavaScript is used to remove the hidden class of other text elements, or to set their "display" attribute to "block".

[0091] When the full text is expanded, in order to ensure the simplicity of the display interface, the ellipsis element can be hidden and the style of the button element can be changed to provide correct visual feedback, such as displaying the button element as "Collapse" text or an upward arrow icon.

[0092] By following these steps, you can implement a complete text expansion and collapse interactive feature. The user first sees the collapsed text and an "Expand" button. Clicking the button expands the entire text, and the button changes to a "collapsed" style, hiding the ellipsis. Clicking the "Collapse" button again collapses the text again, and the button returns to its "expanded" style. This interactive mode effectively improves the user experience, allowing users to more flexibly view long text content.

[0093] Based on the above embodiments of the present application, in the fourth embodiment of the present application, the same or similar contents as those in the above embodiments can be referred to the above introduction and will not be repeated hereafter. On this basis, step S40 further includes steps S41~S42:

[0094] Step S41: Displaying a floating preview window in response to a hovering action of the cursor on the ellipsis element.

[0095] Step S42: Rendering other texts in the second element container except the to-be-displayed text in the floating preview window.

[0096] In addition to expanding the text by clicking the button, you can also use a floating preview window to display other text in the second element container.

[0097] Optionally, step S42 includes steps S421 to S425:

[0098] Step S421 : extracting entity words from the other texts, and determining the fields to which the other texts belong through the entity words.

[0099] For example, NLP (Natural Language Processing) models such as BERT or Spacy are used to perform part-of-speech tagging and named entity recognition on the input text, extracting entity words such as names of people, places, organizations, time periods, and proper nouns. These entity words are then fed into a pre-trained domain classification model such as TextCNN or FastText, where they are matched to a predefined domain tag library to determine the domain to which the rest of the text belongs.

[0100] Step S422: determining subject terms based on the fields to which the other texts belong.

[0101] Step S423 , performing iterative topic clustering on the other texts according to the topic terms using a topic clustering algorithm to obtain topic clusters.

[0102] Exemplarily, after determining the fields to which the other texts belong, the corresponding subject terms can be determined based on a preset domain knowledge graph. Then, at least two subject terms are arbitrarily selected from the above subject terms as initial anchor points, and the other texts are used as inputs of a subject clustering algorithm such as a latent Dirichlet allocation algorithm. The subject clustering algorithm is used to group the other texts according to the similarity between the sentences in the other texts and the initial anchor points to obtain a first subject cluster. Then, the anchor points are reselected, and the subset texts within the first subject cluster are further classified according to the similarity between the subset texts and the anchor points to obtain a second subject cluster. The above subject clustering process is iteratively executed until the similarity between the texts in the subject cluster and the anchor points is lower than the preset similarity threshold. In each round of iteration, the weight of the subject terms that have been used as anchor points is attenuated to avoid the model from being overly dependent on the initial anchor points and ignoring new topics.

[0103] Step S424: determining the weight of the keyword according to the number of occurrences and entity types of the keyword in the topic cluster, and determining the topic keyword in each of the topic clusters according to the weight of the keyword.

[0104] Step S425 , generating text topics according to the topic keywords in each of the topic clusters, and rendering and displaying the text topics in the floating preview window.

[0105] For each text in the topic cluster, count the number of times each keyword appears in all texts in the topic cluster. Assign weights based on the keyword's entity type, such as person name, place name, organization name, time, proper noun, etc. For example, the weight of a proper noun can be set to 1.2, the weight of a common noun to 1.0, the weight of a verb to 0.8, and so on. Multiply the number of keyword occurrences by the entity type weight to obtain the keyword's weight in the topic cluster. Filter out keywords from the topic cluster whose weight is greater than or equal to the weight threshold and use them as the topic keywords of the topic cluster.

[0106] After obtaining the topic keywords corresponding to each topic cluster, the topic keywords are input into the language model to generate text topics based on these topic keywords. The text topics are then rendered in a floating preview window. Users can read the topic content that is not displayed in the floating preview window.

[0107] It should be noted that the above examples are only used to understand this application and do not constitute a limitation on the text display method of this application. More simple transformations based on this technical concept are all within the scope of protection of this application.

[0108] The present application provides a text display device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the text display method in the above-mentioned embodiment one.

[0109] Reference below Figure 4 , which shows a schematic diagram of the structure of a text display device suitable for implementing the embodiments of the present application. The text display device in the embodiments of the present application may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, and tablet computers (PADs), as well as fixed terminals such as desktop computers. Figure 4 The text display device shown is merely an example and should not limit the functions and scope of use of the embodiments of the present application.

[0110] like Figure 4As shown, the text display device may include a processing device 1001 (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes based on programs stored in a read-only memory (ROM) 1002 or programs loaded from a storage device 1003 into a random access memory (RAM) 1004. RAM 1004 also stores various programs and data required for the operation of the text display device. Processing device 1001, ROM 1002, and RAM 1004 are interconnected via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems may be connected to I / O interface 1006: input devices 1007, such as a touchscreen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; output devices 1008, such as a liquid crystal display (LCD), speaker, vibrator, etc.; storage device 1003, such as a magnetic tape or hard disk; and communication device 1009. Communication device 1009 can allow the text display device to communicate with other devices wirelessly or wired to exchange data. Although the figure shows a text display device with various systems, it should be understood that it is not required to implement or have all of the systems shown. More or fewer systems can be implemented or have instead.

[0111] In particular, according to the embodiments disclosed in the present application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via a communication device, or installed from a storage device 1003, or installed from a read-only memory 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are performed.

[0112] The text display device provided in this application utilizes the text display method of the aforementioned embodiment, resolving the technical issue of current text display methods' poor adaptability in dynamic environments. Compared to the prior art, the text display device provided in this application achieves the same beneficial effects as the text display method provided in the aforementioned embodiment. Other technical features of this text display device are the same as those disclosed in the aforementioned embodiment and are not further elaborated upon here.

[0113] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0114] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

[0115] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, a computer program) stored thereon, and the computer-readable program instructions are used to execute the text display method in the above-mentioned embodiment.

[0116] The computer-readable storage medium provided herein may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems, or devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM) or flash memory, optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this embodiment, the computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including, but not limited to, wires, optical cables, radio frequency (RF), etc., or any suitable combination thereof.

[0117] The computer-readable storage medium may be included in the text presentation device, or may exist independently without being incorporated into the text presentation device.

[0118] The computer-readable storage medium may carry one or more programs that, when executed by a text presentation device, enable the text presentation device to write computer program code for performing the operations of the present application in one or more programming languages, or a combination thereof. The programming languages ​​include object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, or as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0119] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, program segment or part of code, and the module, program segment or part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, as well as the combination of boxes in the block diagram and / or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or can be implemented using a combination of dedicated hardware and computer instructions.

[0120] The modules described in the embodiments of the present application may be implemented in software or hardware, wherein the name of a module does not necessarily limit the unit itself.

[0121] The computer-readable storage medium provided in this application is a computer-readable storage medium storing computer-readable program instructions (i.e., a computer program) for executing the aforementioned text display method. This computer-readable storage medium can address the technical issue of current text display methods' poor adaptability in dynamic environments. Compared to the prior art, the beneficial effects of the computer-readable storage medium provided in this application are similar to those of the text display method provided in the aforementioned embodiments and will not be further elaborated here.

[0122] The above description is only part of the embodiments of the present application and does not limit the patent scope of the present application. All equivalent structural transformations made by using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect application in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A text display method, characterized in that: The text display method includes: Determine a container height of a first element container, wherein the first element container is a div element, and the container height is determined by accessing the offsetHeight attribute of the div element; Determine the font size and text line height of all text in the first element container, wherein the font size is obtained by accessing the style.fontSize attribute of the div element, and the text line height is obtained by accessing the style.lineHeight attribute of the div element, or traverse the child text nodes in the div element, obtain the calculated style of each child text node through getComputedStyle, and obtain the font size and text line height of the text corresponding to the child text node through the calculated style; Determine a comparison result of the product of the font size and the text line height and the height of the container; If the height of the container is less than the product of the font size and the text line height, determining the number of display lines based on the height of the container; Determining text to be displayed in a second element container based on the number of display rows, controlling a style attribute of the text to be displayed to be displayed, and controlling a style attribute of other text in the second element container except the text to be displayed to be hidden, wherein the text in the first element container is consistent with the text in the second element container, and the second element container further includes an ellipsis element and a button element; Determining a horizontal positioning reference point of the ellipsis element according to a character baseline position and a character logical width of the last character in the text to be displayed; Determining a rendering position of the ellipsis element based on the horizontal positioning reference point; The ellipsis element is rendered according to the rendering position of the ellipsis element, so that the ellipsis element is displayed at the end of the text to be displayed.

2. The text display method according to claim 1, wherein: After the step of determining the comparison result of the product of the font size and the text line height with the container height, the method further includes: If the container height is greater than or equal to the product of the font size and the text line height, after all the text in the second element container is used as the text to be displayed, the style attribute of the text to be displayed is controlled to be display.

3. The text display method according to claim 1, wherein: The button element is a block-level element.

4. The text display method according to claim 1, wherein: The step of determining the rendering position of the ellipsis element based on the horizontal positioning reference point further includes: Determining the vertical baseline offset of the ellipsis element according to the line height and font size of the last character; Determining a vertical positioning reference point of the ellipsis element according to the character baseline position of the last character and the vertical baseline offset; The rendering position of the ellipsis element is determined according to the horizontal positioning reference point and the vertical positioning reference point.

5. The text display method according to claim 4, wherein: After the steps of determining the text to be displayed in the second element container based on the number of display rows, controlling the style attribute of the text to be displayed to be displayed, and controlling the style attribute of other texts in the second element container except the text to be displayed to be hidden, the method further includes: In response to a click action of the button element, the style attributes of the texts other than the to-be-displayed text in the second element container are controlled to be displayed, and the style attribute of the ellipsis element is controlled to be hidden.

6. The text display method according to claim 1, wherein: The step of determining the text to be displayed in the second element container based on the number of display lines further includes: In response to a hovering action of a cursor over the ellipsis element, displaying a floating preview window; Rendering other texts in the second element container except the to-be-displayed text in the floating preview window.

7. The method according to claim 6, wherein The step of rendering other texts in the second element container except the to-be-displayed text in the floating preview window includes: Extracting entity words from the other texts, and determining the fields to which the other texts belong based on the entity words; Determining subject terms based on the fields to which the other texts belong; Performing iterative topic clustering on the other texts according to the topic terms using a topic clustering algorithm to obtain a topic cluster; Determining the weight of the keyword according to the number of occurrences and entity types of the keyword in the topic cluster, and determining the topic keyword in each of the topic clusters according to the weight of the keyword; A text theme is generated according to the theme keywords in each of the theme clusters, and the text theme is rendered and displayed in the floating preview window.

8. A text display device, characterized in that: The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the text display method according to any one of claims 1 to 7.

9. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the text display method according to any one of claims 1 to 7 are implemented.

Images