Element display regulation and control method and device, storage medium and electronic device

Abstract

The invention discloses an element display regulation and control method and device, a storage medium and an electronic device, and relates to the technical field of smart home, the method comprises the following steps: creating a tool prompt container through text attribute information detected in real time from a document object model element to obtain a loading container, carrying out mounting association on the loading container and the document object model element; creating a tool prompt container according to the text attribute information to obtain a loading container, and carrying out mounting association on the loading container and the document object model element; and under the condition that mounting association is completed, decomposing a target text corresponding to the document object model element into a first text and a second text, and regulating and controlling a visual display result of the document object model element according to the first text and the second text. The problems that the processing process of the overflow text is complex and the processing cost is high in the prior art are solved.

Description

Technical Field

[0001] This application relates to the field of smart home technology, and more specifically, to a method, apparatus, storage medium, and electronic device for controlling element display. Background Technology

[0002] In Web (World Wide Web) development, when text content exceeds the width of its container, several common methods are used to handle this: CSS (Cascading Style Sheets) truncation: Using CSS properties such as `text-overflow: ellipsis` (text overflow with an ellipsis) and `white-space: nowrap` (no line breaks) can truncate text when the container width is limited and add an ellipsis at the end. This method is suitable for static text, but may not provide timely display of complete content for dynamically changing or variable-length text. Pure JavaScript monitoring: JavaScript detects the scroll width (`scrollWidth`) and view width (`clientWidth`) of document object model elements. When the scroll width exceeds the view width, it is considered text overflow, and tooltips can be manually triggered. This method requires writing complex JavaScript logic to manage the display and hiding of tooltips and handle changes in text content. However, using this approach requires repeating similar code in each component that needs to handle text overflow, leading to increased code volume and maintenance difficulty. Furthermore, frequent manual checks for text overflow and dynamic creation of document object model nodes can affect page loading speed and user experience. In addition, when the design style or text truncation logic needs to be adjusted, multiple code locations need to be found and modified throughout the project, resulting in high maintenance costs.

[0003] Therefore, in related technologies, no effective solution has yet been proposed for the problem of complex and costly processing of overflowing text. Summary of the Invention

[0004] This application provides a method, apparatus, storage medium, and electronic device for controlling element display, in order to at least solve the problems in the related art where the process of handling overflow text is complex and costly.

[0005] According to one embodiment of this application, a method for controlling element display is provided, comprising: creating a tooltip container by real-time detection of text attribute information from a Document Object Model (DOM) element, obtaining a loading container, and associating the loading container with the DOM element; upon completion of the associativity, decomposing the target text corresponding to the DOM element into a first text and a second text, wherein the first text is the basic text of the DOM element that is allowed to be directly displayed in the editing interface, and the second text is the overflow text to be displayed in the editing interface through the loading container; and controlling the visualization display result of the DOM element according to the first text and the second text.

[0006] In an exemplary embodiment, before obtaining a loading container by creating a tooltip container from text attribute information detected in real time from a document object model element, the method includes: if the text attribute information indicates that the text length of the document object model element exceeds the target length supported by a preset basic style, obtaining the portion of text of the document object model element that exceeds the target length in the editing interface, and creating a container to hold the tooltip based on the portion of text, thus obtaining a loading container; if the text attribute information indicates that the text length of the document object model element does not exceed the target length supported by the preset basic style, determining to display the document object model element on the editing interface using the preset basic style.

[0007] In an exemplary embodiment, creating a container to hold a tooltip based on a portion of text to obtain a loading container includes: determining the actual text length corresponding to the portion of text and the display style requirements corresponding to the portion of text; determining the required size and position of the tooltip container based on the actual text length and the display style requirements; loading a target component from a predefined UI component library based on the required size and position requirements to generate an initial container; and obtaining the loading container by filling the initial container with the portion of text.

[0008] In one exemplary embodiment, adjusting the visualization display result of a document object model element based on a first text and a second text includes: when no text overflow occurs in the document object model element, running a first visualization display result, wherein the first visualization display result is to display the first text in the editing interface and readjust the loading container to an unmounted state; when text overflow occurs in the document object model element, running a second visualization display result, wherein the second visualization display result is to display the first text in the editing interface and automatically expand the loading container to display the second text.

[0009] In an exemplary embodiment, after creating a tooltip container by real-time detection of text attribute information from a Document Object Model (DOM) element, obtaining a loading container, and attaching the loading container to the DOM element, the method further includes: determining the actual content width of the DOM element and the content area width of the DOM element; if the actual content width is greater than the content area width, determining that the text attribute information indicates text overflow in the DOM element and that text overflow control is required; if the actual content width is less than or equal to the content area width, determining that the text attribute information indicates no text overflow in the DOM element and that the DOM element does not need to participate in text overflow control.

[0010] In one exemplary embodiment, associating a loading container with a document object model element includes: determining a first display area of ​​the document object model element in the editing interface, and identifying blank sub-regions in other areas of the editing interface besides the first display area; and dividing the blank sub-regions into display areas of the loading container.

[0011] In an exemplary embodiment, after adjusting the visualization display results of document object model elements based on the first text and the second text, the method further includes: listening to the visualization display results; generating a first prompt message to update the loading container when the visualization display results indicate that the second text cannot be displayed normally; and determining the element unloading information corresponding to the document object model element when the visualization display results indicate that the first text cannot be displayed normally, and deleting the loading container based on the element unloading information.

[0012] According to another aspect of the embodiments of this application, an element display control device is also provided, comprising: an association module, configured to create a tooltip container by real-time detection of text attribute information from a document object model element, obtain a loading container, and mount the loading container to the document object model element; a decomposition module, configured to decompose the target text corresponding to the document object model element into a first text and a second text after the mounting association is completed, wherein the first text is the basic text of the document object model element that is allowed to be directly displayed in the editing interface, and the second text is the overflow text to be displayed in the editing interface through the loading container; and a control module, configured to control the visualization display result of the document object model element according to the first text and the second text.

[0013] According to yet another embodiment of this application, a computer-readable storage medium is also provided, wherein a computer program is stored therein, and the computer program is configured to perform the steps in any of the above method embodiments when it is run.

[0014] According to yet another embodiment of this application, an electronic device is also provided, including a memory and a processor, wherein the memory stores a computer program and the processor is configured to run the computer program to perform the steps in any of the above method embodiments.

[0015] According to yet another embodiment of this application, a computer program product is also provided, including a computer program that, when executed by a processor, implements the steps in any of the above method embodiments.

[0016] In this embodiment, by monitoring the text attributes (such as length and width) of Document Object Model (DOM) elements in real time, it automatically determines whether the text overflows and creates or updates the tooltip container (i.e., the loading container) based on the overflow status. Secondly, the complete text of the DOM element is intelligently decomposed into two parts: the first text (base text) is displayed directly within the DOM element, while the second text (overflowing text) is displayed in the tooltip container. This decomposition ensures that users can still quickly obtain key information within limited display space, while viewing the complete text when needed. Then, based on the display requirements of the first and second texts, the visualization state of the DOM element is adjusted in real time. This adjustment includes not only displaying the tooltip container when text overflows, but also automatically updating the display logic of the first and second texts when the text content or container size changes, ensuring the consistency and smoothness of the user interface. By adopting the above technical solution, the problem of complex and costly processing of overflowing text is solved, thereby avoiding unnecessary DOM element operations and calculations, especially in scenarios where text changes frequently, effectively improving page performance. At the same time, users can intuitively see the basic text information and view the complete text through the tooltip container when needed, which improves the efficiency of information acquisition and the aesthetics of the interface. Attached Figure Description

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

[0018] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is a schematic diagram of the hardware environment for a method of controlling element display according to an embodiment of this application;

[0020] Figure 2 This is a flowchart illustrating the control method according to the elements of an embodiment of this application;

[0021] Figure 3 This is a flowchart illustrating the rendering of instructions according to an embodiment of this application;

[0022] Figure 4 This is a structural block diagram of a control device according to an embodiment of this application. Detailed Implementation

[0023] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0024] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, apparatus, or device that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, apparatus, or devices.

[0025] According to one aspect of the embodiments of this application, a method for controlling element display is provided. This method for controlling element display is widely applicable to whole-house intelligent digital control application scenarios such as smart homes, smart home ecosystems, and intelligence house ecosystems. Optionally, in this embodiment, the above-mentioned method for controlling element display can be applied to, for example... Figure 1 The hardware environment shown consists of terminal device 102 and server 104. Figure 1 This is a schematic diagram of the hardware environment for a method of controlling element display according to an embodiment of this application, such as... Figure 1As shown, server 104 is connected to terminal device 102 via a network and can be used to provide services (such as application services) to the terminal or clients installed on the terminal. A database can be set up on the server or independently of the server to provide data storage services for server 104. Cloud computing and / or edge computing services can be configured on the server or independently of the server to provide data processing services for server 104.

[0026] The aforementioned network may include, but is not limited to, at least one of the following: wired network, wireless network. The aforementioned wired network may include, but is not limited to, at least one of the following: wide area network, metropolitan area network, local area network. The aforementioned wireless network may include, but is not limited to, at least one of the following: Wi-Fi (Wireless FiDelity), Bluetooth. The terminal device 102 may not be limited to PC, mobile phone, tablet computer, smart air conditioner, smart range hood, smart refrigerator, smart oven, smart stove, smart washing machine, smart water heater, smart washing equipment, smart dishwasher, smart projector, smart TV, smart clothes rack, smart curtains, smart audio-visual equipment, smart socket, smart speaker, smart speaker box, smart fresh air equipment, smart kitchen and bathroom equipment, smart bathroom equipment, smart robot vacuum cleaner, smart window cleaning robot, smart mopping robot, smart air purifier, smart steam oven, smart microwave oven, smart water heater, smart air purifier, smart water dispenser, smart door lock, etc.

[0027] This embodiment provides a method for controlling element display, applied to the aforementioned terminal device. Figure 2 This is a flowchart illustrating a control method according to an embodiment of this application, the process including the following steps:

[0028] Step S202: Create a tooltip container by real-time detecting the text attribute information from the document object model element, obtain the loading container, and attach the loading container to the document object model element;

[0029] This involves real-time monitoring of the text attributes of a specified DOM (Document Object Model) element to determine whether a tooltip container needs to be created. If the text length exceeds the width limit of the DOM element, the system automatically creates a loading container—the tooltip—to hold and display the overflowing text. This loading container is then attached to the original Document Object Model element, positioning and associating the tooltip near that element for display to the user at an appropriate time.

[0030] Step S204: After the mounting association is completed, the target text corresponding to the document object model element is decomposed into a first text and a second text. The first text is the basic text in the document object model element that can be directly displayed in the editing interface, and the second text is the overflow text to be displayed in the editing interface through the loading container.

[0031] In other words, once it's determined that a tooltip needs to be created and displayed, the target text within the Document Object Model (DOM) element will be intelligently decomposed into two parts: primary text and secondary text. Primary text refers to the portion of the content that can be directly displayed within the DOM element and does not exceed the width limit. This portion will be displayed directly on the user interface as the base text to ensure that the core information is immediately perceived by the user. Secondary text, on the other hand, is the overflow text that exceeds the width limit. This portion will not be displayed directly within the DOM element but will be shown to the user through the previously created loading container.

[0032] Step S206: Adjust the visualization display results of the document object model elements according to the first text and the second text.

[0033] Optionally, the system will automatically adjust the display effect of the Document Object Model (DOM) elements based on the display requirements of the first and second texts. For example, it may hide the overflow portion of the first text to prevent visual clutter, while ensuring that the tooltip correctly displays the second text. This means that when the mouse hovers over a DOM element, the complete text will be displayed through the tooltip, while normally only the first text (the basic text) will be displayed to maintain a clean and efficient interface. Furthermore, considering the dynamic changes in DOM elements or text content—that is, when the size, text length, or layout of a DOM element changes—the system will run steps S202 and S204 again to reassess the text overflow status and adjust the tooltip display to ensure that correct information display and a good user experience are always provided.

[0034] Through the steps described above, the system automatically determines whether text overflows by monitoring the text attributes (such as length and width) of Document Object Model (DOM) elements in real time, and creates or updates the tooltip container (i.e., the loading container) based on the overflow status. Secondly, the complete text of the DOM element is intelligently decomposed into two parts: the first text (base text) is displayed directly within the DOM element, while the second text (overflowing text) is displayed in the tooltip container. This decomposition ensures that users can still quickly obtain key information within limited display space, while viewing the complete text when needed. Then, the visualization state of the DOM element is adjusted in real time according to the display requirements of the first and second texts. This adjustment includes not only displaying the tooltip container when text overflows, but also automatically updating the display logic of the first and second texts when the text content or container size changes, ensuring the consistency and smoothness of the user interface. This technical solution solves the problem of complex and costly processing of overflowing text, thereby avoiding unnecessary DOM element operations and calculations, and effectively improving page performance, especially in scenarios where text changes frequently. At the same time, users can intuitively see the basic text information and view the complete text through the tooltip container when needed, which improves the efficiency of information acquisition and the aesthetics of the interface.

[0035] In an exemplary embodiment, before obtaining a loading container by creating a tooltip container from text attribute information detected in real time from a Document Object Model (DOM) element, the method includes: if the text attribute information indicates that the text length of the DOM element exceeds the target length supported by a preset basic style, obtaining a portion of the DOM element's text that exceeds the target length in the editing interface, and creating a container to hold the tooltip based on the portion of the text, thus obtaining a loading container; if the text attribute information indicates that the text length of the DOM element does not exceed the target length supported by the preset basic style, determining to display the DOM element on the editing interface using the preset basic style.

[0036] In other words, by monitoring the text attribute information in Document Object Model (DOM) elements in real time, the system automatically determines whether the text length exceeds the maximum display length allowed by the preset base style. When text length exceeding the preset length is detected, the portion of the DOM element's text that exceeds the editing interface is retrieved. Then, based on this overflowing text, a container specifically designed to hold tooltips is automatically created, called a loading container. This loading container is then used to display the complete text content, not just the portion that can be directly displayed within the DOM element. In this way, even if the text length exceeds the container's limit, the user can still view the full information through the tooltips, ensuring complete information delivery. Conversely, if the detection result shows that the text length does not exceed the length range specified by the preset style, then the preset base style will be used directly to display the text within the DOM element. In this case, since the text length is within the container's limit, there is no need to create an additional loading container to display the overflowing portion, thereby simplifying the page layout, improving loading speed, and maintaining the consistency and aesthetics of the user interface.

[0037] In an exemplary embodiment, creating a container to hold a tooltip based on the partial text to obtain a loading container includes: determining the actual text length corresponding to the partial text and the display style requirements corresponding to the partial text; determining the required size and position of the tooltip container based on the actual text length and the display style requirements; loading a target component from a predefined UI component library based on the required size and the position requirements to generate an initial container; and obtaining the loading container by filling the initial container with the partial text.

[0038] Optionally, the overflowing text is precisely measured to determine its actual length, while considering the style requirements for display, such as font size and line spacing. Based on the actual length and style requirements of the overflowing text, the size required to create the tooltip container (i.e., the tooltip container) is calculated, including its width, height, and position relative to the original document object model elements. This ensures the tooltip is logically laid out on the user interface, neither obscuring important information nor being too obtrusive, while still providing a clear and intuitive prompt. Subsequently, a suitable component is selected from the project's predefined UI (User Interface) component library as the basis for generating the tooltip container. This library provides various styles and sizes of tooltip templates to suit different design needs. An initial container is loaded and generated based on the calculated size and position requirements, serving as the platform for displaying the overflowing text. Finally, the previously obtained overflowing text is filled into the generated initial container. The text is ensured to display correctly within the container, and the container's style and layout are adjusted for optimal visual appeal and user experience. Once filled, the container becomes the loading container. It will be displayed in a timely manner based on user interactions, such as mouse hover, providing complete text content and solving the problem of incomplete information caused by text length limitations.

[0039] In an exemplary embodiment, adjusting the visualization display result of the document object model element based on the first text and the second text includes: when the document object model element does not experience text overflow, running a first visualization display result, wherein the first visualization display result is to display the first text in the editing interface and readjust the loading container to an unmounted state; and when the document object model element experiences text overflow, running a second visualization display result, wherein the second visualization display result is to display the first text in the editing interface and automatically expand the loading container to display the second text.

[0040] Understandably, when it's detected that the text within a Document Object Model (DOM) element (i.e., the sum of the first and second texts) does not exceed its width or length limits—meaning no text overflow—the first visualization result will be executed. This means that only the complete text content (i.e., the first text) needs to be displayed in the editing interface, without the need for additional tooltips or loading containers. Simultaneously, any previously created loading containers used to display overflowing text will be reset to an unmounted state, avoiding unnecessary resource consumption and ensuring lightweight and efficient page loading. Conversely, if the text length within a DOM element does exceed its display capacity, causing text overflow, the second visualization result will be activated. In this case, the editing interface will only display the first text (i.e., the base text within the container's width limit), and the second text (i.e., the overflowing text) will not be displayed directly within the DOM element. Instead, the previously created loading container (i.e., the tooltip) will automatically expand, displaying the complete second text content within it. This approach not only maintains a clean interface but also ensures that users can access complete information through simple interactions (such as mouse hover), thus improving the user experience.

[0041] In an exemplary embodiment, after creating a tooltip container by real-time detecting text attribute information from a Document Object Model (DOM) element, obtaining a loading container, and attaching the loading container to the DOM element, the method further includes: determining the actual content width of the element corresponding to the DOM element and the content area width of the element corresponding to the DOM element; if the actual content width of the element is greater than the content area width of the element, determining that the text attribute information indicates that the DOM element has text overflow and that text overflow control is required; if the actual content width of the element is less than or equal to the content area width of the element, determining that the text attribute information indicates that the DOM element does not have text overflow and that the DOM element does not need to participate in text overflow control.

[0042] In simple terms, this involves measuring the actual content width and the content area width of a Document Object Model (DOM) element. The former refers to the minimum width required for the text content within the element to fully expand, while the latter is the width allocated to the DOM element within the current layout for displaying the text. By comparing these two measurements, it's possible to quickly identify whether the text exceeds the element's display boundaries. If the actual content width is greater than the content area width, it indicates that the text within the DOM element is overflowing, requiring further processing or adjustments to optimize the display. This typically means that the complete text content cannot be fully displayed within the given display area, necessitating measures such as creating a tooltip to supplement the display of the complete information. Conversely, if the actual content width is less than or equal to the content area width, it means the text content can be fully contained within the element, and there is no overflow issue. In this case, the DOM element does not require any special text overflow control and can display all text normally according to the preset basic style, maintaining interface consistency and simplicity.

[0043] In an exemplary embodiment, associating the loading container with the document object model element includes: determining a first display area of ​​the document object model element in the editing interface, and identifying blank sub-regions in other areas of the editing interface besides the first display area; and dividing the blank sub-regions into display areas of the loading container.

[0044] Optionally, the display position of the Document Object Model (DOM) element within the editing interface is determined, and this position is defined as the primary display area. This forms the basis for positioning the tooltip container, ensuring that the tooltip accurately corresponds to the DOM element for easy user understanding and access. Next, the entire editing interface is scanned to find blank sub-regions outside the primary display area. These blank sub-regions refer to spaces on the page not yet occupied by other elements; they provide potential locations for the tooltip container, preventing overlap or conflict between the tooltip and other elements on the page. Based on the collected information, the most suitable blank sub-region for displaying the loading tooltip container is automatically identified. This process considers factors such as the tooltip's size, position, and user interaction habits, ensuring that the tooltip can fully display overflowing text without interfering with the normal display of other page elements. In this way, the loading container can be seamlessly integrated into the page layout.

[0045] In an exemplary embodiment, after adjusting the visualization display result of the document object model element according to the first text and the second text, the method further includes: listening to the visualization display result; generating a first prompt message to update the loading container when the visualization display result indicates that the second text cannot be displayed normally; and determining the element unloading information corresponding to the document object model element and deleting the loading container based on the element unloading information when the visualization display result indicates that the first text cannot be displayed normally.

[0046] Understandably, when the text content of an element (corresponding to a Document Object Model DOM element) to which the custom directive `v-ellipsis-tooltip` is applied changes, the directive immediately recalculates the element's scroll width and visible width to determine whether the first text (the normally displayed text content) or the second text (the complete or expanded text content) exceeds the element's visible width. This process ensures that the display style of the Document Object Model element is dynamically updated based on the current text content, such as adding or removing ellipses.

[0047] In one exemplary embodiment, once the visual display of a Document Object Model (DOM) element (i.e., the element's current display state) is updated, this display continues to be monitored. If it is detected that second text (typically complete content, truncated if longer than the container's visible width) cannot fit the current container width, i.e., overflow occurs, the instruction automatically generates and displays a tooltip, the first tooltip, to present the truncated second text in its complete form, providing the user with clear additional information. Conversely, if the first text (typically simplified or pre-defined text content that fits the container's visible width) is detected as not displaying correctly, this may mean that the element's width is sufficient to display the complete text, and a tooltip is not needed to display additional information. Therefore, the instruction recognizes that the loading container corresponding to the DOM element, i.e., the container used to display the tooltip, is no longer needed. It automatically clears this loading container based on the element's unloading information, avoiding unnecessary DOM nodes and thus optimizing page performance and memory usage. This mechanism ensures that the display state can be intelligently adjusted when content changes, providing a visually appealing and functional user interface while maintaining good performance.

[0048] To better understand the process of the above-mentioned element display control method, the following description of the element display control method flow is further illustrated with reference to optional embodiments, but it is not intended to limit the technical solutions of the embodiments of this application.

[0049] As an optional implementation, this application proposes a method for text overflow detection and conditional tooltip display based on Vue directives. Taking a Vue directive as an example, the method involves adding the directive `v-ellipsis-tooltip` to the required Document Object Model (DOM). Optionally, Vue stands for "Vue.js," which means "view" or "Vue framework." Vue.js is a progressive JavaScript framework for building user interfaces. It provides efficient data binding and componentization capabilities through a simple and intuitive Application Programming Interface (API) and Document Object Model (DOM) technology, allowing developers to easily create reusable modular user interface (UI) components and effectively manage and update the interface state. The rendering process of this directive is as follows... Figure 3 As shown, Figure 3 This is a flowchart illustrating the rendering process according to the instructions in an embodiment of this application, including the following steps:

[0050] Step 1: Mount the command and bind it to the Document Object Model (DOM) element;

[0051] Step 2: Immediately set the basic styles (such as maximum width, title attribute, etc.).

[0052] Step 3: Text overflow detection, including: calculating the element's scroll width (scrollWidth) and the visible width (clientWidth); if the scroll width (scrollWidth) > the visible width (clientWidth), it is determined as "overflow".

[0053] Step 4: Determine if there is an overflow.

[0054] Step 5: In this case, create a tooltip container and execute the "Create and mount tooltip" code.

[0055] Step 6: If not, remove the tooltip container and execute the "Clean up and show original elements" code.

[0056] Optionally, step five, creating and mounting the tooltip (executed only when overflow occurs), includes: creating a new tooltip container node, using any UI component library's tooltip; cloning the original element content; creating a view application instance based on the cloned content; rendering the tooltip component; mounting the rendered result to the container; hiding the original element (to avoid double display); and saving the Vue application instance reference for later destruction.

[0057] Optionally, step six, cleaning up and displaying the original elements (only performed if there is no overflow), includes: removing the tooltip container and displaying the original elements; if an old tooltip instance exists, destroying and clearing the references, i.e., cleaning up the tooltip instance.

[0058] Step 7: Establish content listeners. Use the updated hook functions (i.e., hook functions) provided in the Vue application to continuously monitor changes in the text content within the target element or its child elements. When any change is detected, the custom directive `v-ellipsis-tooltip` will re-evaluate whether the text within the container overflows and update the tooltip's display accordingly, ensuring that the complete or truncated text information is always displayed correctly. The listener function triggers the "re-detection" logic after each change.

[0059] It should be noted that the above process also includes: re-detection and looping, that is, when the content changes, it returns to text overflow detection; when the content does not change, it maintains the current state and continues to listen.

[0060] Step 8: Uninstall Command (End of Lifecycle), clean up all created tooltip instances, remove listeners, and the process ends.

[0061] In the example above, the system automatically determines whether text overflows based on the relationship between the scroll width and visible width properties in the Document Object Model. It dynamically decides whether to display a tooltip based on whether the text exceeds the limit, and uses a tooltip component to dynamically display the complete content without manual settings. Furthermore, it supports dynamic content updates and real-time detection of overflow status. When the element is unloaded, related resources are automatically cleaned up to avoid memory leaks.

[0062] In summary, the embodiments of this application eliminate the need for manual text overflow detection; the complete functionality can be achieved directly using instructions. Furthermore, it automatically displays complete content prompts, supports dynamic content updates, and detects overflow status in real time, adapting to complex scenarios and resolving text overflow issues. Moreover, by encapsulating logic through custom instructions, it reduces repetitive code; modifying one part affects the entire code, enabling secondary definitions and reducing workload when used in multiple places.

[0063] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software device. This computer software device is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods of the various embodiments of this application.

[0064] Figure 4 This is a structural block diagram of a control device according to an embodiment of this application; as shown. Figure 4 As shown, it includes:

[0065] The association module 42 is used to create a tooltip container by real-time detection of text attribute information from document object model elements, obtain a loading container, and attach the loading container to the document object model elements.

[0066] The decomposition module 44 is used to decompose the target text corresponding to the document object model element into a first text and a second text when the mounting association is completed. The first text is the basic text in the document object model element that can be directly displayed in the editing interface, and the second text is the overflow text to be displayed in the editing interface through the loading container.

[0067] The control module 46 is used to control the visualization display results of the document object model elements according to the first text and the second text.

[0068] The aforementioned device automatically determines whether text overflows by monitoring the text attributes (such as length and width) of Document Object Model (DOM) elements in real time, and creates or updates the tooltip container (i.e., loading container) based on the overflow status. Secondly, the complete text of the DOM element is intelligently decomposed into two parts: the first text (base text) is displayed directly within the DOM element, while the second text (overflowing text) is displayed in the tooltip container. This decomposition ensures that users can still quickly obtain key information within limited display space, while viewing the complete text when needed. Then, the visualization state of the DOM element is adjusted in real time according to the display requirements of the first and second texts. This adjustment includes not only displaying the tooltip container when text overflows, but also automatically updating the display logic of the first and second texts when the text content or container size changes, ensuring the consistency and smoothness of the user interface. This technical solution solves the problem of complex and costly processing of overflowing text, thereby avoiding unnecessary DOM element operations and calculations, and effectively improving page performance, especially in scenarios where text changes frequently. At the same time, users can intuitively see the basic text information and view the complete text through the tooltip container when needed, which improves the efficiency of information acquisition and the aesthetics of the interface.

[0069] In one exemplary embodiment, the apparatus further includes: a determining module, configured to, before creating a tooltip container based on text attribute information detected in real time from a document object model element and obtaining a loading container, if the text attribute information indicates that the text length of the document object model element exceeds the target length supported by a preset basic style, obtain a portion of the text of the document object model element that exceeds the target length in the editing interface, and create a container to hold the tooltip based on the portion of the text, thereby obtaining a loading container; if the text attribute information indicates that the text length of the document object model element does not exceed the target length supported by the preset basic style, determine to display the document object model element on the editing interface using the preset basic style.

[0070] In an exemplary embodiment, the aforementioned association module is used to determine the actual text length corresponding to the partial text and the display style requirements corresponding to the partial text; determine the required container size and container position requirements of the tooltip container based on the actual text length and display style requirements; load the target component from a predefined UI component library based on the required container size and container position requirements to generate an initial container; and obtain the loaded container by filling the partial text into the initial container.

[0071] In an exemplary embodiment, the aforementioned control module is further configured to: run a first visualization display result when no text overflow occurs in the document object model element, wherein the first visualization display result is to display the first text in the editing interface and readjust the loading container to an unmounted state; and run a second visualization display result when text overflow occurs in the document object model element, wherein the second visualization display result is to display the first text in the editing interface and automatically expand the loading container to display the second text.

[0072] In an exemplary embodiment, the aforementioned association module is further configured to determine the actual content width of the element corresponding to the document object model element and the content area width of the element corresponding to the document object model element; if the actual content width of the element is greater than the content area width of the element, the text attribute information is determined to indicate that the document object model element has text overflow and that text overflow control is required; if the actual content width of the element is less than or equal to the content area width of the element, the text attribute information is determined to indicate that the document object model element does not have text overflow and that the document object model element does not need to participate in text overflow control.

[0073] In an exemplary embodiment, the aforementioned association module is further configured to determine the first display area of ​​the document object model element in the editing interface, and identify blank sub-areas in other areas of the editing interface besides the first display area; and divide the blank sub-areas into display areas of the loading container.

[0074] In one exemplary embodiment, the above apparatus further includes: a listening module, configured to listen to the visualization display results after adjusting the visualization display results of document object model elements according to the first text and the second text; generate a first prompt message to update the loading container when the visualization display results indicate that the second text cannot be displayed normally; and determine the element unloading information corresponding to the document object model element when the visualization display results indicate that the first text cannot be displayed normally, and delete the loading container based on the element unloading information.

[0075] It should be noted that the above modules can be implemented by software or hardware. For the latter, they can be implemented in the following ways, but are not limited to: all the above modules are located in the same target processor; or, the above modules are located in different target processors in any combination.

[0076] Embodiments of this application also provide a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute the steps in any of the above method embodiments when run.

[0077] Embodiments of this application also provide an electronic device, including a target memory and a target processor, wherein the target memory stores a computer program and the target processor is configured to run the computer program to perform the steps in any of the above method embodiments.

[0078] Embodiments of this application also provide a computer program product, which includes a computer program that, when executed by a processor, implements the steps in any of the above method embodiments.

[0079] Embodiments of this application also provide another computer program product, including a non-volatile computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps in any of the above method embodiments.

[0080] Embodiments of this application also provide a computer program that includes computer instructions stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the steps in any of the above method embodiments.

[0081] Specific examples in this embodiment can be found in the examples described in the above embodiments and exemplary implementations, and will not be repeated here.

[0082] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0083] Obviously, those skilled in the art should understand that the modules or steps of this application described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of N computing devices. They can be implemented using computer-executable program code, and thus can be stored in a storage device for execution by a computing device. In some cases, the steps shown or described can be performed in a different order than those presented here, or they can be fabricated as separate integrated circuit modules, or N modules or steps can be fabricated as a single integrated circuit module. Thus, this application is not limited to any particular combination of hardware and software.

[0084] The foregoing has provided a detailed description of the element display control method, apparatus, storage medium, and electronic device provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are merely for the purpose of helping to understand the method and core ideas of this application. It should be noted that those skilled in the art can make various improvements and modifications to this application without departing from its principles, and these improvements and modifications also fall within the protection scope of the claims of this application.

Claims

1. A method for controlling element display, characterized in that, include: A tooltip container is created by real-time detection of text attribute information from document object model elements, a loading container is obtained, and the loading container is attached to the document object model elements. Once the mounting association is completed, the target text corresponding to the document object model element is decomposed into a first text and a second text. The first text is the basic text in the document object model element that is allowed to be directly displayed in the editing interface, and the second text is the overflow text to be displayed in the editing interface through the loading container. The visualization of the document object model elements is adjusted based on the first text and the second text.

2. The method for controlling element display according to claim 1, characterized in that, The method, which creates a tooltip container by real-time detection of text attribute information from document object model elements, before loading the container, includes: When the text attribute information indicates that the text length of a Document Object Model element exceeds the target length supported by a preset basic style, the part of the text of the Document Object Model element that exceeds the target length in the editing interface is obtained, and a container to accommodate tooltips is created based on the part of the text to obtain a loading container; If the text attribute information indicates that the text length of the document object model element does not exceed the target length supported by the preset basic style, then the document object model element will be displayed in the editing interface using the preset basic style.

3. The method for controlling element display according to claim 2, characterized in that, Based on the aforementioned text, a container is created to hold the tooltip, resulting in a loading container, including: Determine the actual text length corresponding to the aforementioned portion of text and the display style requirements corresponding to the aforementioned portion of text; The required size and position of the tooltip container are determined based on the actual text length and the display style requirements. Based on the required container size and container position, target components are loaded from a predefined UI component library to generate an initial container; By filling the initial container with the partial text, a loading container is obtained.

4. The method for controlling element display according to claim 1, characterized in that, Adjusting the visualization display results of the document object model elements based on the first text and the second text includes: If no text overflow occurs in the document object model element, the first visualization result is run, wherein the first visualization result is to display the first text in the editing interface and readjust the loading container to an unmounted state; In the event of text overflow in the document object model element, a second visualization is executed, wherein the second visualization displays the first text in the editing interface and automatically expands the loading container to display the second text.

5. The method for controlling element display according to claim 1, characterized in that, The method further includes creating a tooltip container by real-time detection of text attribute information from document object model elements, obtaining a loading container, and then attaching the loading container to the document object model elements. Determine the actual content width of the element corresponding to the document object model element, and the content area width of the element corresponding to the document object model element; If the actual content width of the element is greater than the content area width of the element, it is determined that the text attribute information indicates that the document object model element has text overflow and text overflow control is required. If the actual content width of the element is less than or equal to the content area width of the element, it is determined that the text attribute information indicates that the document object model element does not have text overflow, and the document object model element does not need to participate in text overflow control.

6. The method for controlling element display according to claim 1, characterized in that, Associating the loading container with the document object model element includes: Determine the first display area of ​​the document object model element in the editing interface, and identify blank sub-areas in other areas of the editing interface besides the first display area; The blank sub-region is divided into the display area of ​​the loading container.

7. The method for controlling element display according to claim 1, characterized in that, After adjusting the visualization display results of the document object model elements based on the first text and the second text, the method further includes: Monitor the visualization results; If the visualization results indicate that the second text cannot be displayed correctly, generate a first prompt message to update the loading container; If the visualization results indicate that the first text cannot be displayed normally, determine the element unloading information corresponding to the document object model element, and delete the loading container based on the element unloading information.

8. A control device for element display, characterized in that, include: The association module is used to create a tooltip container by real-time detection of text attribute information from document object model elements, obtain a loading container, and attach the loading container to the document object model elements. The decomposition module is used to decompose the target text corresponding to the document object model element into a first text and a second text after the mounting association is completed. The first text is the basic text in the document object model element that can be directly displayed in the editing interface, and the second text is the overflow text to be displayed in the editing interface through the loading container. The control module is used to control the visualization display results of the document object model elements based on the first text and the second text.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein the program, when executed, performs the method described in any one of claims 1 to 7.

10. An electronic device comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to execute the method described in any one of claims 1 to 7 through the computer program.

Images