Webpage content display method and system

Abstract

The invention provides a webpage content display method and system, and the method comprises the steps: obtaining a target operation of a user, enabling the target operation to be used for indicating the browsing of webpage content based on a browser, enabling the browser to comprise a plurality of in-line elements used for bearing the webpage content, and generating and outputting a target page according to the target operation, the target page comprises an overflow indication element inserted in the multiple in-line elements, the in-line elements behind the overflow indication element are hidden, and the overflow indication element is a mark used for indicating the hidden webpage content. According to the method and the device, the output target page can provide as much information as possible in a limited space, and meanwhile, good readability and aesthetic property are kept. Therefore, the user experience can be improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and system for displaying web page content. Background Art

[0002] As the amount of information increases, the way to display web content becomes more and more important. The user interface should be able to provide as much information as possible in a limited space while maintaining good readability and aesthetics.

[0003] In the related art, the web page content can be displayed or hidden by folding, such as by monitoring the switch variable that controls the expansion or collapse of the web page content, and controlling the display range of the web page content according to the initial height and the actual height, that is, the expansion and folding of the web page content.

[0004] However, the above solution mainly emphasizes the two states of expansion and folding of web page content, which is a fixed folding height and has relatively low accuracy, reliability and precision.

[0005] It is worth noting that the contents of the above-mentioned related technologies are merely information known to the inventor personally, which does not mean that the above-mentioned information has entered the public domain before the filing date of this specification, nor does it mean that it can become the prior art of this specification. Summary of the invention

[0006] This specification provides a method and system for displaying web page content to avoid at least one of the above technical problems.

[0007] In a first aspect, this specification provides a method for displaying webpage content, comprising:

[0008] Obtaining a target operation of a user, where the target operation is used to instruct browsing webpage content based on a browser, where the browser includes a plurality of inline elements for carrying the webpage content; and

[0009] Generate and output a target page according to the target operation;

[0010] The target page includes an overflow indicator element inserted into the multiple inline elements, and the inline elements after the overflow indicator element are hidden. The overflow indicator element is a mark used to indicate hidden web page content.

[0011] In a second aspect, this specification provides a web page content display system, including:

[0012] at least one storage medium storing at least one instruction set for displaying webpage content;

[0013] At least one processor is communicatively connected to the at least one storage medium, wherein when the at least one processor is running, it reads the at least one instruction set and executes the method described in the first aspect above according to the instructions of the at least one instruction set.

[0014] In a third aspect, the present specification provides a computer-readable non-temporary storage medium, wherein the computer-readable non-temporary storage medium stores at least one instruction set, and the at least one instruction set is executed by at least one processor to implement the method described in the first aspect.

[0015] It can be seen from the above technical solutions that the web page content display method and system provided in this specification, for the user's target operation, the server hides the corresponding web page content from the dimension of the inline element in the browser. It can avoid the page layout becoming messy due to too much web page content, and provide a neater interface experience. In addition, by adding overflow indicator elements to tell the user that there is still undisplayed web page content, too much information can be hidden without affecting the target page. Moreover, the output target page can provide as much information as possible in a limited space while maintaining good readability and aesthetics. Thereby, the user experience can be improved.

[0016] Other functions of the web page content display method and system provided in this specification will be partially listed in the following description. The creative aspects of the web page content display method and system provided in this specification can be fully explained by practicing or using the methods, devices and combinations described in the following detailed examples. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the embodiments of this specification, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this specification. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0018] Figure 1 A schematic diagram of an application scenario of the web page content display method provided in the embodiments of this specification;

[0019] Figure 2 A schematic diagram of the structure of a web page content display system provided in an embodiment of this specification;

[0020] Figure 3 A schematic diagram of a flow chart of a method for displaying webpage content provided in an embodiment of this specification;

[0021] Figure 4 A schematic diagram of the effect of a method for displaying webpage content provided by one embodiment of this specification;

[0022] Figure 5 A schematic diagram of the effect of a method for displaying webpage content provided by another embodiment of this specification;

[0023] Figure 6 A schematic diagram of the effect of a method for displaying webpage content provided by another embodiment of this specification;

[0024] Figure 7 A schematic diagram of the principle of the method for displaying web page content provided in the embodiments of this specification;

[0025] Figure 8 A schematic diagram of the effect of a method for displaying webpage content provided by another embodiment of this specification;

[0026] Fig. 9 This is a schematic diagram of the effect of a method for displaying web page content provided by another embodiment of this specification. DETAILED DESCRIPTION

[0027] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementations described in the following exemplary embodiments do not represent all implementations consistent with this specification. Instead, they are merely examples of devices and methods consistent with some aspects of this specification as detailed in the appended claims.

[0028] It should be understood that the terms "including" and "having" and any variations thereof in the embodiments of this specification are intended to cover but not exclude inclusion. For example, a product or device comprising a series of components is not necessarily limited to those components explicitly listed, but may include other components not explicitly listed or inherent to these products or devices.

[0029] In the embodiments of this specification, the term "and / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B may represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the associated objects before and after are in an "or" relationship.

[0030] The term "plurality" in the embodiments of the present specification refers to two or more than two, and other quantifiers are similar.

[0031] The terms "first", "second", "third", etc. in this specification are used to distinguish similar or similar objects or entities, and do not necessarily mean to limit a specific order or sequence, unless otherwise indicated. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances, for example, they can be implemented in an order other than those given in the diagrams or descriptions of the embodiments of this specification.

[0032] The term "unit / module" as used in this specification refers to any known or later developed hardware, software, firmware, artificial intelligence, fuzzy logic or combination of hardware and / or software code that is capable of performing the functions associated with that element.

[0033] To facilitate readers' understanding of this specification, the application scenarios of this specification are now introduced.

[0034] The technical solution provided in this specification is applicable to scenarios where web page content needs to be displayed. For example, in a World Wide Web (Web) application, the scenario of displaying web page content to users; in another example, in the process of using Hyper Text Markup Language (HTML) to layout a web page, the scenario of displaying web page content to users; in another example, in the process of using Cascading Style Sheets (CSS) to layout a web page, the scenario of displaying web page content to users.

[0035] Figure 1 FIG. 1 is a schematic diagram of an application scenario of a method for displaying webpage content of an embodiment of the present specification (hereinafter referred to as the display method), wherein the display method of the present specification can be applied to: Figure 1 The application scenario 100 shown. Figure 1 As shown, the application scenario 100 may include a user 101 , a client 102 , a server 103 , and a network 104 .

[0036] The user 101 may be a user who triggers the client 102 to display the webpage content. For example, the user 101 may perform a target operation on the client 102 to trigger the client 102 to display the webpage content. The target operation may be an operation of the user 101 browsing the webpage content based on the browser in the client 102 (specifically, the browsing window of the browser).

[0037] The client 102 may be an electronic device that provides interactive functions to the user 101. For example, the client 102 may provide an interactive interface (or user interface) to the user 101, and the user 101 may perform target operations in the interactive interface. In some embodiments, the client 102 executes the display method described in this specification in response to detecting the target operation triggered by the user 101. At this time, the client 102 may store data or instructions for executing the display method described in this specification, and may execute or be used to execute the data or instructions. In some embodiments, the client 102 may include a hardware device with a data information processing function and the necessary program required to drive the hardware device to work, so as to execute the display method described in this specification.

[0038] In some embodiments, the client 102 may include a mobile device, a tablet computer, a laptop computer, a built-in device of a motor vehicle, or the like, or any combination thereof. In some embodiments, the mobile device may include a smart home device, a smart mobile device, a virtual reality device, an augmented reality device, or the like, or any combination thereof. In some embodiments, the smart home device may include a smart TV, a desktop computer, or the like, or any combination thereof. In some embodiments, the smart mobile device may include a smart phone, a personal digital assistant, a gaming device, a navigation device, or the like, or any combination thereof. In some embodiments, the built-in device in a motor vehicle may include an onboard computer, an onboard TV, or the like. In some embodiments, the client 102 may include a collection device for collecting target operations.

[0039] In some embodiments, the client 102 may be installed with one or more applications (Application, APP). APP can provide the target user 101 with the ability and interface to interact with the outside world through the network 104. APP includes but is not limited to: web browser APP programs, search APP programs, chat APP programs, shopping APP programs, video APP programs, financial management APP programs, instant messaging tools, email clients, social platform software, etc. In some embodiments, a target APP can be installed on the client 102. The target APP can collect target operations for the client 102.

[0040] like Figure 1 As shown, the client 102 can be connected to the server 103 for communication. The server 103 can be connected to one client 102 for communication, or can be connected to multiple clients 102 for communication. In some embodiments, the client 102 can interact with the server 103 through the network 104 to receive or send messages, etc. For example, the client 102 can interact with the server 103 through the network 104 to send a target operation to the server 103.

[0041] The server 103 may be a server that provides various services. For example, the server 103 may be a cloud server or a local server. The server 103 may be connected to a client 102 for communication and receive data sent by the client 102, or may be connected to multiple clients 102 for communication and receive data sent by each client 102.

[0042] In some embodiments, the display method described in this specification can be executed on the server 103. In this case, the server 103 can store data or instructions for executing the display method described in this specification, and can execute or be used to execute the data or instructions. The server 103 can include a hardware device with data information processing functions and the necessary programs required to drive the hardware device to work.

[0043] The network 104 is a medium for providing a communication connection between the client 102 and the server 103. The network 104 can facilitate the exchange of information or data. Figure 1 As shown, the client 102 and the server 103 can be connected to the network 104 respectively, and transmit information or data to each other through the network 104.

[0044] In some embodiments, the network 104 may be any type of wired or wireless network, or a combination thereof. For example, the network 104 may include a cable network, a wired network, a fiber optic network, a telecommunications network, an intranet, the Internet, a local area network (LAN), a wide area network (WAN), a wireless local area network (WLAN), a metropolitan area network (MAN), a public switched telephone network (PSTN), a Bluetooth network TM, a short-range wireless network (ZigBee TM), a near field communication (NFC) network, or a similar network.

[0045] In some embodiments, the network 104 may include one or more network access points. For example, the network 104 may include a wired or wireless network access point, such as a base station or an Internet exchange point, through which one or more components of the client 102 and the server 103 can connect to the network 104 to exchange data or information.

[0046] It is worth mentioning that Figure 1The number of the client 102, server 103 and network 104 is only illustrative. According to the implementation requirements, there can be any number of clients 102, servers 103 and networks 104. And the query method provided in this specification can be executed completely on the client 102, can be executed completely on the server 103, can also be executed partially on the client 102 and partially on the server 103.

[0047] That is to say, Figure 1 and for Figure 1 The above description is only used to illustrate the application scenarios to which the display method of this specification may be applicable, and should not be understood as a limitation on the application scenarios.

[0048] Figure 2 The hardware structure diagram of a web page content display system (hereinafter referred to as the display system) 200 provided according to an embodiment of the present specification is shown. The display system 200 can execute the display method described in the present specification. The display method is introduced in other parts of the present specification. When the display method is executed on the client 102, the display system 200 can be the client 102. When the display method is executed on the server 103, the display system 200 can be the server 103. When the display method can be partially executed on the client 102 and partially executed on the server 103, the display system 200 can be a system including the client 102 and the server 103.

[0049] like Figure 2 As shown, the presentation system 200 may include at least one storage medium 203 and at least one processor 202. In some embodiments, the presentation system 200 may further include a communication port 204 and an internal communication bus 201. The presentation system 200 may further include an I / O component 205.

[0050] The internal communication bus 201 can connect different system components. For example, the internal communication bus 201 can connect the storage medium 203, the processor 202, the communication port 204 and the I / O component 205.

[0051] I / O components 205 support input / output between presentation system 200 and other components.

[0052] The communication port 204 is used to demonstrate data communication between the system 200 and the outside world. For example, the communication port 204 can be used to demonstrate data communication between the system 200 and the network 104. The communication port 204 can be a wired communication port or a wireless communication port.

[0053] The storage medium 203 may include a data storage device. The data storage device may be a non-temporary storage medium or a temporary storage medium. For example, the data storage device may include one or more of a disk 2031, a read-only storage medium (ROM) 2032, or a random access storage medium (RAM) 2033. The storage medium 203 also includes at least one instruction set stored in the data storage device. The instruction set includes computer program code, and the computer program code may include a program, a routine, an object, a component, a data structure, a process, a module, etc. for executing the display method provided in this specification.

[0054] At least one processor 202 may be connected in communication with at least one storage medium 203. At least one processor 202 is used to execute the above-mentioned at least one instruction set. When the display system 200 is running, at least one processor 202 reads the at least one instruction set and executes the display method provided in this specification according to the instructions of the at least one instruction set. The processor 202 may execute all the steps included in the display method. The processor 202 may be in the form of one or more processors. In some embodiments, the processor 202 may include one or more hardware processors, such as a microcontroller, a microprocessor, a reduced instruction set computer (RISC), an application-specific integrated circuit (ASIC), an application-specific instruction set processor (ASIP), a central processing unit (CPU), a graphics processing unit (GPU), a physical processing unit (PPU), a microcontroller unit, a digital signal processor (DSP), a field programmable gate array (FPGA), an advanced RISC machine (ARM), a programmable logic device (PLD), any circuit or processor capable of performing one or more functions, etc., or any combination thereof.

[0055] For the purpose of illustration only, only one processor 202 is shown in the display system 200 in the figure. However, it should be noted that the display system 200 in this specification may also include multiple processors, and therefore, the operations and / or method steps disclosed in this specification may be performed by one processor or by multiple processors in combination. For example, if the processor 202 of the display system 200 is described in this specification as performing step A and step B, it should be understood that step A and step B may also be performed jointly or separately by two different processors 202 (for example, the first processor performs step A, the second processor performs step B, or the first and second processors perform steps A and B together).

[0056] See also Figure 3 , Figure 3 This is a flow chart of the display method provided in the embodiment of this specification. Figure 3 As shown, the method includes the following S301 and S302:

[0057] S301: Obtaining a target operation of a user, where the target operation is used to instruct browsing web page content based on a browser, and the browser includes a plurality of inline elements for carrying web page content.

[0058] Inline elements can be understood as a type of element that is opposite to block elements. Relatively speaking, the main feature of inline elements is that they do not cause line breaks before and after them, and they only occupy the space they need. For example, inline elements can be elements that are naturally arranged in a row according to the document flow, such as , , The inline elements include the web page content that the user expects to browse through the browser, and the web page content can be text, characters, pictures, etc.

[0059] Combined with the above application scenarios, this step can be understood as:

[0060] The client 102 includes a browser, and the browser has a window (ie, a browsing window). The client 102 can provide the user 101 with a service of webpage content that the user desires to browse based on the browsing window.

[0061] For example, the user 101 may initiate a target operation to the client 102 by scrolling, clicking, etc. If the display system is the client 102, the client 102 executes S301 to S302 to display the target page corresponding to the webpage content to the user 101. If the display system is the server 103, the server 103 executes S301 to S302 to display the target page corresponding to the webpage content to the user 101. In this specification, the server 103 is mainly used as an example for exemplary description.

[0062] For example, after receiving the target operation initiated by the user 101 , the client 102 may transmit the target operation to the server 103 via the network 104 .

[0063] Accordingly, the server 103 may receive the target operation sent by the user 101 through the client 102. In some embodiments, when the target operation is received, the server 103 may identify all inline elements in the browser for carrying (or loading) the web page contents.

[0064] S302: Generate and output a target page according to the target operation, wherein the target page includes an overflow indicator element inserted in a plurality of inline elements, and inline elements after the overflow indicator element are hidden, and the overflow indicator element is a mark for indicating hidden web page content.

[0065] Exemplarily, the overflow indicator element may also be referred to as an indicator. The overflow indicator element may be understood as a special element or mark used to indicate that there is additional content that is not displayed. In other words, the overflow indicator element may be understood as an element used to notify the user that there is more invisible web page content.

[0066] In combination with the above example, this step can be understood as: based on the target operation of the user 101, the server 103 can generate and output through the client 102 such as Figure 4 The target page is shown.

[0067] like Figure 4 As shown, the target page includes display content and hidden content, and the display content and the hidden content are separated by an overflow indicator element. Figure 4 It can be seen that the displayed content includes: the overflow indicator element and the webpage content carried in the inline elements before it; the hidden content includes: the webpage content carried in the inline elements after the overflow indicator element.

[0068] In this specification, words with directional meanings such as front and back are based on the user's browsing perspective.

[0069] In addition, it is understood that the overflow indicator element can include different display modes. For example, the overflow indicator element can be Figure 4 Alternatively, the overflow indicator element may also be displayed in the form of an ellipsis.

[0070] Based on the above analysis of S301 and S302, it can be known that in an embodiment, for the user's target operation, the server hides the corresponding web page content from the dimension of the inline element in the browser. It can avoid the page layout from becoming disorganized due to too much web page content, and provide a neater interface experience. In addition, by adding an overflow indicator element to tell the user that there is still undisplayed web page content, too much information can be hidden without affecting the target page. Moreover, the output target page (such as the user interface displayed to the user 101 by the client 102) can provide as much information as possible in a limited space while maintaining good readability and aesthetics. Thereby, the user experience can be improved.

[0071] In some embodiments, the browser further includes a container for carrying at least some of the inline elements, and the container includes a maximum display size along the display direction; the above S302 may include the following S21 and S22:

[0072] S21: If the multiple inline elements include elements that overflow the container, insert overflow indication elements into the multiple inline elements according to the maximum display size.

[0073] Exemplarily, the browser may include a container and the plurality of inline elements. The plurality of elements may be used to carry web page content. The container may carry inline elements. That is, the plurality of inline elements include web page content, and the container includes at least some of the plurality of inline elements.

[0074] Therefore, a container can be used to carry web page content. Accordingly, a container can be understood as an object used to carry web page content. Moreover, a container has a capacity attribute, and a container can carry inline elements corresponding to its capacity. For example, a container can be an HTML element with a corresponding width and height.

[0075] Among them, the container can be called the parent element, and the inline elements are called child elements.

[0076] Continue reading Figure 4 , the container has a maximum display size corresponding to the capacity of the rectangular frame. Within this maximum display size, 6 inline elements can be carried.

[0077] The container also has a display attribute, and the display attribute of the container can be overflow hiding. For example, the container can carry a corresponding number of inline elements based on its capacity, and the inline elements carried by the container include at least part of the webpage content.

[0078] In this embodiment, the overflow indicator element can be further understood as a special element or mark used to indicate that there is additional content that is not displayed when the webpage content exceeds the size limit of the container that carries it.

[0079] Continue reading Figure 4 , the target page can display the webpage content carried by the six inline elements carried by the container to the user, and can display the overflow indicator element to the user. Correspondingly, the webpage content carried by the two inline elements after the overflow indicator element that exceed the maximum display size of the container is hidden.

[0080] In this embodiment, by inserting an overflow indicator element in combination with the maximum display size of the container, as much webpage content as possible can be displayed within a limited space.

[0081] It is worth noting that for different scenarios, the container may have different display directions. For example, Figure 4 The display direction is horizontal display. In some other embodiments, the display direction may also be vertical display. For different display directions, the maximum display size may represent different capacity limitations.

[0082] For example, if the display direction is horizontal, the maximum display size is the maximum height. Figure 4 In the , the maximum display size of the container is the maximum height of the container. If the display direction is vertical, the maximum display size is the maximum width.

[0083] In this embodiment, the server can determine different display directions according to different scenarios, so as to determine the corresponding maximum display size based on the different display directions, thereby improving the application scope and flexibility of the display method of this specification.

[0084] In some embodiments, S21 may include the following S211 and S212:

[0085] S211: Determine, from the multiple inline elements, a first target inline element that overflows from the maximum display size.

[0086] The "target" in the target inline element is used to distinguish the first inline element that overflows from the maximum display size from other elements, and should not be understood as a limitation on the inline element.

[0087] Continue reading Figure 4 The multiple inline elements are 8 inline elements. The server determines, from the 8 inline elements, a first target inline element that exceeds the maximum display size of the container and overflows.

[0088] In some embodiments, each of the plurality of inline elements includes a starting position along the display direction. S211 may include the following steps 1 and 2:

[0089] Step 1: Compare the maximum display size and the corresponding starting positions of the elements in each row to obtain the first starting position that is larger than the maximum display size.

[0090] Exemplarily, for the multiple inline elements, the server may sequentially compare the starting positions of the inline elements with the maximum display size to determine whether the starting positions of the inline elements are larger than the maximum display size, until the first starting position larger than the maximum size is obtained.

[0091] Step 2: Determine the first inline element corresponding to the starting position that is larger than the maximum display size as the target inline element.

[0092] Exemplarily, the first inline element corresponding to the starting position larger than the maximum display size is the first inline element that overflows the container. Therefore, the server determines the inline element corresponding to the first starting position larger than the maximum display size as the target inline element.

[0093] Combining the above analysis of step 1 and step 2, it can be seen that in this embodiment, the server can quickly, accurately and reliably determine the target inline element from the multiple inline elements by comparing each starting position with the maximum display size.

[0094] Combined with the above analysis, it can be seen that for different scenarios, the display direction may be different directions, such as the display direction may be horizontal display or vertical display. If the display direction is horizontal display, the starting position is the starting vertical coordinate; if the display direction is vertical display, the starting position is the starting horizontal coordinate.

[0095] To facilitate the understanding of readers, we take the horizontal display direction as an example, and the starting position as the starting vertical coordinate. Figure 4 The above-mentioned step 1 and step 2 are explained by way of example.

[0096] The maximum height of the container is Y. Figure 4 As shown, the plurality of inline elements are 8 inline elements, and are respectively marked as element 1 to element 8. The starting vertical coordinate of element 1 is marked as y1, and the starting vertical coordinate of element 8 is marked as y8.

[0097] That is, the server can obtain the coordinate array (y1, y1, y1, y2, y2, y3, y3) of the starting ordinates of element 1 to element 8. The server can traverse the coordinate data to obtain the first starting ordinate greater than the maximum height Y.

[0098] For example, the server can start position comparison from element 1, that is, first compare the starting vertical coordinate y1 of element 1 with the maximum height Y. If the starting vertical coordinate of the element in the current comparison line is less than the maximum height Y, the server continues to compare the next comparison element in the line. If the starting vertical coordinate y1 of element 1 is less than the maximum height Y, the server continues to compare the starting vertical coordinate y2 of element 2 with the maximum height Y.

[0099] And so on, until the first starting ordinate greater than the maximum height Y is obtained. For example, the starting ordinate y7 of element 7 is obtained. Therefore, the server can determine element 7 as the target inline element.

[0100] Combining the above analysis of step 1 and step 2, it can be seen that the server can compare the maximum display size with the starting position to easily and quickly determine the target inline element.

[0101] In other embodiments, the server may also determine the target inline element by identifying the row and the inline elements in the row.

[0102] For example, the display direction is still horizontal. When the display direction is horizontal, the maximum height is determined based on the preset number of rows N and the preset unit row height, where N is an integer greater than or equal to 1. S211 may include the following steps 11 and 12:

[0103] Step 11: Determine the inline element located in the N+1th row from the multiple inline elements.

[0104] Exemplary, combined Figure 4 It can be seen that N can be 2. Each row has a corresponding height, and the preset unit row height can be understood as the height of any row.

[0105] Continue reading Figure 4 , elements 1 to 3 are located in row 1, elements 4 to 6 are located in row 2, and elements 7 and 8 are located in row 3. The server can determine the inline elements located in row 3 from the 8 elements: elements 7 and 8.

[0106] Step 12: Determine the first inline element of the N+1th row as the target inline element.

[0107] Continuing with the above example and Figure 4 , the inline elements of the 3rd row include elements 7 and 8. And element 7 is the first inline element in the 3rd row. Therefore, the server can determine element 7 as the target inline element.

[0108] Combining the above analysis of step 11 and step 12, it can be seen that in this embodiment, the server can also determine the target inline element by combining the way of identifying the line in the container, which can improve the diversity and flexibility of determining the target inline element.

[0109] S212: inserting an overflow indication element into the multiple inline elements according to the target inline element.

[0110] Accordingly, when the first target inline element that exceeds the capacity limit of the container is determined, the server may insert an overflow indication element into the six inline elements.

[0111] Combining the above analysis of S211 and S212, it can be seen that in this embodiment, by first determining the first target in-line element that exceeds the capacity limit of the container and then completing the insertion of the overflow indicator element, the accuracy and reliability of inserting the overflow indicator element can be improved.

[0112] In some embodiments, S212 may include the following steps 1 and 2:

[0113] Step 1: Get the adjacent inline element that is adjacent to the target inline element and before the target inline element.

[0114] Similarly, the "adjacent" in the adjacent inline elements cannot be understood as a limitation on the inline elements. Adjacent inline elements can be understood as inline elements in the multiple inline elements that simultaneously meet the following two conditions.

[0115] Condition 1: Adjacent to the target inline element. Condition 2: Located before the target inline element. Moreover, due to the above two conditions, the adjacent inline element actually satisfies another hidden condition: the adjacent inline element is the last inline element that does not exceed the container capacity limit.

[0116] Continue reading Figure 4 It can be seen that through this step, the server can determine Figure 4 The adjacent inline element shown in —element 6.

[0117] Step 2: Insert overflow indicator elements into multiple inline elements based on adjacent inline elements and containers.

[0118] Accordingly, when the adjacent inline elements are determined, the server may further combine the container, such as the maximum display size of the container, to insert the overflow indicator element, so as to improve the accuracy and reliability of inserting the overflow indicator element.

[0119] In some embodiments, step 2 may include the following steps 21 to 23:

[0120] Step 21: Verify whether the overflow indicator element overflows the container when the overflow indicator element is inserted after the adjacent inline element. If the verification result is no, execute step 22; if the verification result is yes, execute step 23.

[0121] Exemplarily, after determining the adjacent inline element, the server may determine the end position of the adjacent inline element as the insertion position for inserting the overflow indicator element, so that the overflow indicator element is subsequently inserted at the insertion position (ie, after the adjacent inline element).

[0122] Combined with the above analysis, it can be seen that the container has a corresponding size limit (such as the maximum display size). The adjacent inline element is the last inline element that does not exceed the container capacity limit. If the server inserts an overflow indicator element after the last inline element, the following two situations may occur.

[0123] Case 1: The overflow indicator element overflows the container. Figure 5 As shown in the figure, there is not enough space left for the overflow indicator element after the adjacent inline elements. If the overflow indicator element is inserted after the adjacent inline elements, the overflow indicator element will overflow the container. Figure 5 As shown, the overflow indicator element will wrap.

[0124] Case 2: The overflow indicator element does not overflow the container. Figure 4 As shown in the figure, there is enough space for the overflow indicator element after the adjacent inline elements. If the overflow indicator element is inserted after the adjacent inline elements, the overflow indicator element will not overflow the container. Figure 4 As shown, the overflow indicator element is the last element displayed in the container.

[0125] In some embodiments, step 21 may include the following sub-steps 1 to 3:

[0126] Sub-step 1: Obtaining position information corresponding to the overflow indicator element at the determined insertion position and the actual insertion position.

[0127] Exemplarily, the determined insertion position is the position in the container where the adjacent inline elements end. In some embodiments, the server may represent the insertion position based on an offset, and the offset may start from 0.

[0128] For example, combining the above example and Figure 4 If the target inline element is element 7 and the adjacent inline element is element 6, the server can record offset = 5 to indicate that the insertion position is the end position of element 6.

[0129] The actual insertion position may be the determined insertion position, such as Figure 4 It may not be the determined insertion position, such as Figure 5 shown.

[0130] That is to say, the determined insertion position and the actual insertion position may be the same position or may be different positions.

[0131] Sub-step 2: If the corresponding location information is the same, then determine that the verification result is yes.

[0132] Correspondingly, if the determined insertion position and the actual insertion position are the same position, and the position information corresponding to the determined insertion position and the actual insertion position are the same, the server may determine that it is case 2: the overflow indication element does not overflow the container.

[0133] Sub-step 3: If the corresponding location information is different, determine that the verification result is no.

[0134] Correspondingly, if the determined insertion position and the actual insertion position are different positions, and the position information corresponding to the determined insertion position and the actual insertion position are different, the server may determine that it is case 1: the overflow indication element overflows the container.

[0135] Combined with the analysis of sub-steps 1 to 3 above, it can be seen that in this embodiment, the server can determine the verification result conveniently and quickly by combining the location information.

[0136] Step 22: Insert an overflow indicator element after the adjacent inline element.

[0137] Combined with the above example, for situation 2, such as Figure 4 As shown, since there is enough space left for the overflow indicator element after the adjacent inline elements, the server can directly insert the overflow indicator element after the adjacent inline elements.

[0138] Step 23: Insert an overflow indicator element before the adjacent inline element.

[0139] Combined with the above example, for situation 1, if Figure 5 As shown in FIG. 1 , since there is insufficient space for the overflow indicator element after the adjacent inline elements, the server can insert the overflow indicator element before the adjacent inline elements. Figure 5 It can be seen that the adjacent inline elements are hidden.

[0140] Combined with the above analysis of steps 21 to 23, it can be seen that in this embodiment, the server verifies whether the overflow indicator element inserted after the adjacent inline elements exceeds the container, so as to perform different operations according to different verification results. The effectiveness and reliability of inserting the overflow indicator element can be further improved. In addition, more flexibility and more operating space can be achieved.

[0141] Combined with the above analysis of S21, it can be seen that in some embodiments, the server may first determine the first target inline element that overflows from the maximum display size, and then insert an overflow indicator element based on the target inline element. In other embodiments, the server may also insert the overflow indicator element in other ways.

[0142] For example, taking the display direction as horizontal display, the maximum height is determined based on the preset number of rows N and the preset unit row height. S21 may include the following S215 and S216:

[0143] S215: Determine an inline element located in the Nth row from the multiple inline elements.

[0144] Combining the above examples with Figure 4 , the server can Figure 4 Among the 8 inline elements (element 1 to element 8) shown, the inline elements located in the second row - element 3 to element 6 are determined.

[0145] S216: Insert an overflow indication element after the last inline element of the Nth row.

[0146] Continuing with the above example and Figure 4 After the server determines the inline elements 3 to 6 located in the second row from the container, it can further determine the last inline element 6 in the second row. Accordingly, the server can insert an overflow indicator element after element 6.

[0147] Combined with the above analysis of S215 and S216, it can be known that in this embodiment, after obtaining the number of rows of inline elements that the container can display, the server can determine the last row of inline elements that the container can display, and further insert an overflow indicator element after the last inline element of the last row of inline elements that the container can display. This can improve the diversity and flexibility of inserting overflow indicator elements.

[0148] S22: Render and output the target page.

[0149] Relatively speaking, combined Figure 4 It can be seen that the server inserts overflow indicator elements from the dimensions of the inline elements by combining the maximum display size of the container. This can achieve displaying as much web page content as possible to the user within the size limit of the container, and can avoid the web page content displayed to the user being too crowded.

[0150] In some embodiments, the display method provided in this specification may further include: in response to the interactive icon moving to the overflow indication element, performing a floating layer display on the webpage content hidden in the target page. The interactive icon is used to interact with the user.

[0151] For example, combining the above examples and Figure 1 In the application scenario shown, the server 103 can display a target page to the user 101 through the client 102. The target page includes an interactive icon through which the user 101 can interact with the client 102 and the server 103.

[0152] like Figure 6 , the overflow indication element may be an ellipsis, and the interactive icon may be a mouse icon. The user 101 may move the mouse icon to the overflow indication element. The client 102 may perform a floating layer display on the inline elements hidden in the target page, so as to perform a floating layer display on the webpage content hidden in the target page. This can facilitate users to expand and view the complete webpage content while effectively avoiding overflow and redundancy of information, thereby improving the user experience.

[0153] In some embodiments, the display method provided in this specification may further include: in response to a change in the size of a browsing window of the browser, generating and outputting a changed target page according to the changed browsing window.

[0154] For example, the size of the browser may change, which is specifically reflected in the browser window becoming larger or smaller. For example, the user may need to switch to a different device to browse the web page content. For another example, the user may zoom in and out on the web page content.

[0155] Correspondingly, the size of the container and the size of the elements in the row may also change. In this case, the server needs to regenerate the corresponding page to adapt to the size change of the browsing window.

[0156] In this embodiment, the server can detect the size of the browsing window. If it is detected that the size of the browsing window has changed, the server can re-determine the position of inserting the overflow indication element and reinsert the overflow indication element to render the corresponding page. This can achieve flexible adaptation to the browsing needs of users and improve the flexibility and reliability of displaying web page content to users.

[0157] Based on the above analysis, it can be seen that the above examples are mainly from the situation that the multiple inline elements exceed the capacity limit of the container and the inline elements overflow the container. In other embodiments, there may also be a situation that the multiple inline elements do not exceed the capacity limit of the container.

[0158] For example, in combination with the above analysis, it can be known that the container has a maximum display size, and the multiple inline elements have their own corresponding space sizes. The server can determine whether there are inline elements that overflow the container among the multiple inline elements according to the maximum display size and the space sizes. If yes, execute the above S302; if no, execute the following 303.

[0159] like Figure 7 As shown, when the target operation initiated by the user is obtained, the server can obtain the container of the browser and the multiple inline elements to determine whether there are inline elements that overflow the container. For example, the server can compare whether the maximum display size of the container can cover the multiple inline elements, that is, the maximum display size and the total space occupied by the multiple inline elements.

[0160] If the maximum display size is smaller than the total occupied space size, it means that the container cannot contain the multiple inline elements, that is, some inline elements will overflow the container. In this case, the server can execute the above S302.

[0161] For example, in combination with the above analysis, when it is determined that an inline element overflows the container, the server can insert an overflow indication element into the multiple inline elements to generate a corresponding target page. Figure 7 As shown, the server can first determine the insertion position (such as the position where the elements in the adjacent rows end), and then insert the overflow indicator element at the insertion position to render and display the target page to the user. The specific implementation principle can be found in the above example, which will not be repeated here.

[0162] On the contrary, if the maximum display size is greater than or equal to the total occupied space size, it means that the container can cover the multiple inline elements, that is, no inline element will overflow the container. In this case, the server can execute the following S303.

[0163] In combination with the above analysis, it can be known that the insertion position of the overflow indicator element can be represented by an offset. Accordingly, when none of the multiple in-line elements overflow the container, the server can record the offset as -1.

[0164] S303: Generate and output a first page, wherein there is no hidden inline element in the first page, that is, the first page includes the multiple inline elements displayed in the container.

[0165] Exemplarily, in the case where none of the multiple in-line elements exceeds the capacity limit of the container, that is, the judgment result is no, then Figure 7 As shown, the server can output the first page of web page content carried in the container.

[0166] Specifically, Figure 8 As shown, the number of the multiple inline elements is 5, and none of the 5 inline elements overflows the container. The server outputs a first page including webpage contents carried by the 5 inline elements.

[0167] For example, Fig. 9 As shown, the number of the multiple inline elements is 3, and none of the 3 inline elements overflows the container. The server outputs a first page including webpage contents carried by the 3 inline elements.

[0168] In this embodiment, the server outputs the first page displaying all web page contents when none of the multiple inline elements overflow the container, that is, the capacity of the container can bear the multiple inline elements. This can improve the comprehensiveness of web page content display while avoiding congestion of web page content.

[0169] It is worth noting that the above examples are only used to illustrate the possible implementation methods of the display method of this specification, and cannot be understood as limiting the implementation methods of the display method of this specification. For example, based on the above technical concept, some of the above technical features can be combined to obtain a new embodiment; new technical features can be added on the basis of the above examples to obtain a new embodiment; some technical features can be reduced on the basis of the above examples to obtain a new embodiment; some technical features in the above examples can be replaced with other technical features; some technical features and the order of the above examples can be adjusted to obtain a new embodiment, etc., which will not be listed here one by one.

[0170] Based on the above technical concept, this specification also provides a computer-readable non-temporary storage medium, in which at least one instruction set is stored. When the at least one instruction set is executed by a processor, the steps of the display method described in this specification are implemented.

[0171] In some possible implementations, various aspects of this specification may also be implemented in the form of a program product, which includes a program code. When the program product is run on the display system 200, the program code is used to make the display system 200 perform the steps of the display method described in this specification. The program product for implementing the above method may include program code using a portable compact disk read-only memory (CD-ROM) and may be run on the display system 200. However, the program product of this specification is not limited to this. In this specification, a readable storage medium may be any tangible medium containing or storing a program, which may be used by an instruction execution system or used in combination with it. The program product may use any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of readable storage media include: an electrical connection with one or more conductors, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. The computer-readable storage medium may include a data signal propagated in a baseband or as part of a carrier wave, wherein a readable program code is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The readable storage medium may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, device, or device. The program code contained on the readable storage medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination of the above. Program code for performing the operations of the present specification may be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the presentation system 200, partially on the presentation system 200, as a separate software package, partially on the presentation system 200 and partially on a remote presentation system, or entirely on a remote presentation system 200.

[0172] The above is a description of a specific embodiment of the present specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require a specific order or a continuous order to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0173] In summary, after reading this detailed disclosure, those skilled in the art will appreciate that the foregoing detailed disclosure may be presented only by way of example and may not be limiting. Although not explicitly stated herein, those skilled in the art will appreciate that this specification requires various reasonable changes, improvements and modifications to the embodiments. These changes, improvements and modifications are intended to be proposed by this specification and are within the spirit and scope of the exemplary embodiments of this specification.

[0174] In addition, certain terms in this specification have been used to describe embodiments of this specification. For example, "one embodiment", "embodiments" and / or "some embodiments" mean that a particular feature, structure or characteristic described in conjunction with the embodiment may be included in at least one embodiment of this specification. Therefore, it can be emphasized and should be understood that two or more references to "an embodiment" or "one embodiment" or "an alternative embodiment" in various parts of this specification do not necessarily refer to the same embodiment. In addition, particular features, structures or characteristics may be appropriately combined in one or more embodiments of this specification.

[0175] It should be understood that in the foregoing description of the embodiments of this specification, in order to help understand a feature and for the purpose of simplifying this specification, this specification combines various features in a single embodiment, figure or its description. However, this does not mean that the combination of these features is necessary. When reading this specification, it is entirely possible for a person skilled in the art to mark out some of the devices as separate embodiments. In other words, the embodiments in this specification can also be understood as the integration of multiple secondary embodiments. And the content of each secondary embodiment is also valid when it is less than all the features of a single aforementioned disclosed embodiment.

[0176] Each patent, patent application, patent application publication, and other material, such as articles, books, specifications, publications, documents, literature, etc., cited herein (excluding any historical review documents related thereto) is hereby incorporated by reference for all purposes relevant to this document, such as in the specification and claims herein. However, if there is any inconsistency or conflict between the descriptions, definitions, and / or terminology of the aforementioned materials and the descriptions, definitions, and / or terminology used herein, the descriptions, definitions, and / or terminology used herein shall prevail.

[0177] Finally, it should be understood that the embodiments of the application disclosed herein are explanations of the principles of the embodiments of this specification. Other modified embodiments are also within the scope of this specification. Therefore, the embodiments disclosed in this specification are only used as examples and not as limitations. Those skilled in the art can adopt alternative configurations according to the embodiments in this specification to implement the applications in this specification. Therefore, the embodiments of this specification are not limited to the embodiments accurately described in the application.

Claims

1. A method for displaying webpage content, comprising: Obtaining a target operation of a user, wherein the target operation is used to instruct browsing webpage content based on a browser, wherein the browser includes a plurality of inline elements for carrying the webpage content; as well as Generate and output a target page according to the target operation; The target page includes an overflow indicator element inserted into the multiple inline elements, and the inline elements after the overflow indicator element are hidden. The overflow indicator element is a mark used to indicate hidden web page content.

2. The method according to claim 1, wherein: The browser further includes a container for carrying at least some of the inline elements, and the container includes a maximum display size along a display direction; The generating and outputting a target page according to the target operation includes: If the multiple inline elements include elements that overflow the container, inserting the overflow indicator element into the multiple inline elements according to the maximum display size; as well as Render and output the target page.

3. The method according to claim 2, wherein: If the display direction is horizontal display, the maximum display size is the maximum height; if the display direction is vertical display, the maximum display size is the maximum width.

4. The method according to claim 3, wherein: The inserting the overflow indication element into the plurality of inline elements according to the maximum display size includes: Determine, from the multiple inline elements, a first target inline element that overflows from the maximum display size; and The overflow indication element is inserted into the multiple inline elements according to the target inline element.

5. The method according to claim 4, wherein: The inserting the overflow indication element into the plurality of inline elements according to the target inline element comprises: Obtaining an adjacent inline element that is adjacent to the target inline element and before the target inline element; and The overflow indication element is inserted into the plurality of inline elements according to the adjacent inline elements and the container.

6. The method according to claim 5, wherein inserting the overflow indicator element into the plurality of inline elements according to the adjacent inline elements and the container comprises: Verify whether the overflow indicator element overflows the container when the overflow indicator element is inserted after the adjacent inline element; as well as If the verification result is negative, the overflow indication element is inserted after the adjacent in-row element.

7. The method according to claim 6, wherein: The method further comprises: If the verification result is yes, the overflow indication element is inserted before the adjacent inline element.

8. The method according to claim 7, wherein: The verifying that the overflow indicator element is inserted after the adjacent inline element to determine whether the overflow indicator element overflows the container includes: Obtaining position information corresponding to the overflow indicator element at the determined insertion position and the actual insertion position; If the respective corresponding position information is the same, determining that the verification result is yes; If the respective corresponding position information is different, it is determined that the verification result is no.

9. The method according to claim 4, wherein: Each inline element of the plurality of inline elements comprises a starting position along the display direction; The step of determining, from the plurality of inline elements, a first target inline element that overflows from the maximum display size comprises: Compare the maximum display size and the starting positions corresponding to the elements in each row to obtain a first starting position that is larger than the maximum display size; as well as The first determined inline element corresponding to the starting position that is larger than the maximum display size is determined as the target inline element.

10. The method according to claim 9, wherein: If the display direction is horizontal display, the starting position is the starting vertical coordinate; if the display direction is vertical display, the starting position is the starting horizontal coordinate.

11. The method according to claim 4, wherein: If the display direction is horizontal display, the maximum height is determined based on a preset number of rows N and a preset unit row height; The step of determining, from the plurality of inline elements, a first target inline element that overflows from the maximum display size comprises: Determine the in-row element located in the N+1th row from the multiple in-row elements; as well as The first in-row element of the N+1th row is determined as the target in-row element.

12. The method according to claim 3, wherein: If the display direction is horizontal display, the maximum height is determined based on a preset number of rows N and a preset unit row height; then inserting the overflow indicator element into the multiple in-row elements according to the maximum display size includes: Determine the inline element located in the Nth row from the multiple inline elements; and The overflow indication element is inserted after the last in-row element of the Nth row.

13. The method according to any one of claims 1 to 12, wherein: The method further comprises: In response to the interactive icon moving to the overflow indication element, a floating layer display is performed on the webpage content hidden in the target page, wherein the interactive icon is used to interact with the user.

14. The method according to any one of claims 1 to 12, wherein: The method further comprises: In response to a change in the size of the browsing window of the browser, a changed target page is generated and output according to the changed browsing window.

15. The method according to any one of claims 1 to 12, wherein: The browser also includes a container for carrying at least some of the inline elements; the method also includes: If none of the multiple inline elements overflows the container, generating and outputting a first page; There are no hidden inline elements in the first page.

16. A web page content display system, comprising: at least one storage medium storing at least one instruction set for displaying webpage content; At least one processor is communicatively connected to the at least one storage medium, wherein when the at least one processor is running, the at least one instruction set is read, and the method as described in any one of claims 1 to 15 is executed according to the instructions of the at least one instruction set.

Images