CN113326458B - Processing method for multi-line text truncation display based on Javascript - Google Patents
Processing method for multi-line text truncation display based on Javascript Download PDFInfo
- Publication number
- CN113326458B CN113326458B CN202110596494.4A CN202110596494A CN113326458B CN 113326458 B CN113326458 B CN 113326458B CN 202110596494 A CN202110596494 A CN 202110596494A CN 113326458 B CN113326458 B CN 113326458B
- Authority
- CN
- China
- Prior art keywords
- text
- character
- display
- acquiring
- span
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 11
- 238000003491 array Methods 0.000 claims description 5
- 238000000034 method Methods 0.000 claims 2
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention aims to provide a processing method for multi-line text truncation display based on Javascript. A processing method for multi-line text truncation display based on Javascript comprises the following steps: acquiring all contents in a display area; adding a specific empty element behind each character, and calculating the position of each character through the added elements; and intercepting the characters which exceed the display area, updating the characters to the display area, and finishing multi-line intercepting display.
Description
Technical Field
The invention particularly relates to a processing method for multi-line text truncation display based on Javascript, and belongs to the technical field of computer information.
Background
With the continuous development of computer network technology, BS architecture systems are widely used in various industries, and therefore, the loading content of web programs is more and more diversified. Nowadays, text contents in web pages are more and more abundant, different text contents need to be displayed in the same display area of the web pages, and for multi-line texts, a browser does not have a mode of being directly used for intercepting display.
Disclosure of Invention
The invention aims to provide a processing method for multi-line text truncation display based on Javascript.
In order to achieve the purpose, the invention is realized by the following technical scheme:
a processing method for multi-line text truncation display based on Javascript comprises the following steps:
acquiring all contents in a display area; adding a specific empty element behind each character, and calculating the position of each character through the added elements; and intercepting the characters which exceed the display area, updating the characters to the display area, and finishing multi-line intercepting display.
The preferable scheme of the processing method for intercepting and displaying the multi-line text based on the Javascript comprises the following steps: step S01: the position attribute of the DIV container is set as: absolute or relative;
step S02: obtaining the width and height dimensions of the DIV container;
step S03: acquiring all text contents in a DIV container;
step S04: dividing the text content acquired in the step S03 into single character arrays;
step S05: traversing the array, adding a null element < span > behind each character, recording the index value of the corresponding array element into the attribute of the < span > element, and splicing into a new character string;
step S06: splicing and omitting the representation text before the spliced character strings;
step S07: updating the generated text character string into a DIV container;
step S08: traversing the empty < span > elements added in the step s05, obtaining the position of each element, and comparing with the width and height sizes obtained in the step s02
Step S09: calculating a < span > element exceeding the DIV container firstly, and acquiring an index value stored in the element;
step S10: dividing the array obtained in s04 according to the index value obtained in s09, splicing the array into text strings, and adding a set text with omitted representation;
step S11: and updating the text in the S10 into a DIV container to complete the multi-line text truncation display.
The invention has the advantages that: according to the width and height of a text container in the webpage, multi-line text truncation display can be realized.
Detailed Description
The technical solutions in the embodiments of the present invention are clearly and completely described below, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
As mentioned in the background art, the following problems exist in the prior art: for multi-line text, the browser does not have a direct way to truncate the display.
Aiming at the problems, the invention adopts the following technical scheme: the processing method for multi-line text truncation display based on Javascript comprises the following steps: acquiring all contents in a display area; adding a specific empty element behind each character, and calculating the position of each character through the added elements; and intercepting the characters which exceed the display area, updating the characters to the display area, and finishing multi-line intercepting display.
DETAILED DESCRIPTION OF EMBODIMENT (S) OF INVENTION
The processing method for multi-line text truncation display based on Javascript comprises the following steps:
step S01: the position attribute of the DIV container is set as: absolute or relative;
step S02: obtaining the width and height dimensions of the DIV container;
step S03: acquiring all text contents in a DIV container;
step S04: dividing the text content acquired in the step S03 into single character arrays;
step S05: traversing the array, adding a null element < span > behind each character, recording the index value of the corresponding array element into the attribute of the < span > element, and splicing into a new character string;
step S06: splicing and omitting the representation text before the spliced character strings;
step S07: updating the generated text character string into a DIV container;
step S08: traversing the empty < span > elements added in the step s05, obtaining the position of each element, and comparing with the width and height sizes obtained in the step s02
Step S09: calculating a < span > element exceeding the DIV container firstly, and acquiring an index value stored in the element;
step S10: dividing the arrays obtained in s04 according to the index values obtained in s09, splicing the arrays into text strings, and adding the set text with omission representation;
step S11: and updating the text in the S10 into the DIV container to complete the multi-line text truncation display.
Finally, it should be noted that: although the present invention has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that changes may be made in the embodiments and/or equivalents thereof without departing from the spirit and scope of the invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (1)
1. A processing method for multi-line text truncation display based on Javascript comprises the following steps:
acquiring all contents in a display area; adding a specific empty element behind each character, and calculating the position of each character through the added elements; intercepting the characters which exceed the display area, and updating the characters to the display area to complete multi-line intercepting display; the method is characterized in that: the method specifically comprises the following steps:
step S01: the position attribute of the DIV container is set as: absolute or relative;
step S02: obtaining the width and height dimensions of the DIV container;
step S03: acquiring all text contents in a DIV container;
step S04: dividing the text content acquired in the step S03 into single character arrays;
step S05: traversing the array, adding a null element < span > behind each character, recording the index value of the corresponding array element into the attribute of the < span > element, and splicing into a new character string;
step S06: splicing and omitting the representation text before the spliced character strings;
step S07: updating the generated text character string into a DIV container;
step S08: traversing the empty < span > elements added in the step S05, acquiring the position of each element, and comparing the position with the width and height sizes acquired in the step S02;
step S09: calculating a < span > element exceeding the DIV container firstly, and acquiring an index value stored in the element;
step S10: dividing the array obtained in s04 according to the index value obtained in s09, splicing the array into text strings, and adding a set text with omitted representation;
step S11: and updating the text in the S10 into a DIV container to complete the multi-line text truncation display.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110596494.4A CN113326458B (en) | 2021-05-31 | 2021-05-31 | Processing method for multi-line text truncation display based on Javascript |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110596494.4A CN113326458B (en) | 2021-05-31 | 2021-05-31 | Processing method for multi-line text truncation display based on Javascript |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113326458A CN113326458A (en) | 2021-08-31 |
| CN113326458B true CN113326458B (en) | 2022-06-21 |
Family
ID=77422390
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110596494.4A Active CN113326458B (en) | 2021-05-31 | 2021-05-31 | Processing method for multi-line text truncation display based on Javascript |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113326458B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114020224A (en) * | 2021-10-12 | 2022-02-08 | 北京达佳互联信息技术有限公司 | Text display method and device, electronic equipment, storage medium and product |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104133811A (en) * | 2013-05-02 | 2014-11-05 | 腾讯科技（深圳）有限公司 | Text processing method and mobile terminal |
| CN106873925A (en) * | 2015-12-10 | 2017-06-20 | 北京国双科技有限公司 | The display methods and device of label text |
| CN110990747A (en) * | 2019-12-17 | 2020-04-10 | 北京思维造物信息科技股份有限公司 | Image generation method, device, equipment and storage medium |
| CN112596803A (en) * | 2020-08-24 | 2021-04-02 | 文思海辉智科科技有限公司 | Control string truncation checking method and device, computer equipment and storage medium |
| CN112800078A (en) * | 2021-02-04 | 2021-05-14 | 北京明略软件系统有限公司 | Lightweight text labeling method, system, equipment and storage medium based on javascript |
| CN113989485A (en) * | 2021-11-29 | 2022-01-28 | 合肥高维数据技术有限公司 | Text character segmentation method and system based on OCR recognition |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102708774B (en) * | 2012-04-19 | 2015-04-08 | 广东威创视讯科技股份有限公司 | Display method of character strings and system thereof |
| EP3252625A1 (en) * | 2016-06-01 | 2017-12-06 | Taboola.com Ltd. | Scalable content rendering |
| CN111400998B (en) * | 2020-03-09 | 2023-09-26 | 北京字节跳动网络技术有限公司 | Text display method and device, electronic equipment and readable storage medium |
-
2021
- 2021-05-31 CN CN202110596494.4A patent/CN113326458B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104133811A (en) * | 2013-05-02 | 2014-11-05 | 腾讯科技（深圳）有限公司 | Text processing method and mobile terminal |
| CN106873925A (en) * | 2015-12-10 | 2017-06-20 | 北京国双科技有限公司 | The display methods and device of label text |
| CN110990747A (en) * | 2019-12-17 | 2020-04-10 | 北京思维造物信息科技股份有限公司 | Image generation method, device, equipment and storage medium |
| CN112596803A (en) * | 2020-08-24 | 2021-04-02 | 文思海辉智科科技有限公司 | Control string truncation checking method and device, computer equipment and storage medium |
| CN112800078A (en) * | 2021-02-04 | 2021-05-14 | 北京明略软件系统有限公司 | Lightweight text labeling method, system, equipment and storage medium based on javascript |
| CN113989485A (en) * | 2021-11-29 | 2022-01-28 | 合肥高维数据技术有限公司 | Text character segmentation method and system based on OCR recognition |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113326458A (en) | 2021-08-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7765236B2 (en) | Extracting data content items using template matching | |
| CN100568226C (en) | Be used for the method that reformatting has the zone of chaotic hyperlink | |
| US9703766B1 (en) | Systems and methods for generating tables from print-ready digital source documents | |
| Song et al. | A hybrid approach for content extraction with text density and visual importance of DOM nodes | |
| CN113326458B (en) | Processing method for multi-line text truncation display based on Javascript | |
| CN109492177B (en) | web page blocking method based on web page semantic structure | |
| US11157678B2 (en) | Scalable content rendering | |
| AU2020352890B2 (en) | Dynamic typesetting | |
| CN103593406A (en) | Static resource identifier processing method and device | |
| CN107590288B (en) | Method and device for extracting webpage image-text blocks | |
| WO2022179128A1 (en) | Crawler-based data crawling method and apparatus, computer device, and storage medium | |
| CN107783983B (en) | Information display method and device | |
| US10019488B2 (en) | Automated identification of record header tags | |
| CN110968757A (en) | Policy file processing method and device | |
| CN109960561B (en) | Page element display method and device and electronic equipment | |
| US20160342570A1 (en) | Document presentation qualified by conditions evaluated on rendering | |
| US20180011822A1 (en) | Apparatus and method for outputting web content | |
| CN113761415A (en) | Page display method and device | |
| CN112966481A (en) | Data table display method and device | |
| CN111368113B (en) | Commodity data display method, system, medium and equipment | |
| CN117195840B (en) | Method and device for marking and inserting special-shaped objects in web editor in real time | |
| US20230281380A1 (en) | Method of processing text, electronic device and storage medium | |
| CN111698364B (en) | Contact person information extraction method, related device and computer readable storage medium | |
| CN114580365A (en) | Table component drawing method and device, electronic equipment and storage medium | |
| CN113779438A (en) | Webpage text information processing method and device and terminal equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 250101 west area, North 1st floor, S06 building, 1036 Chaochao Road, high tech Zone, Jinan City, Shandong Province Applicant after: Shandong Inspur Ultra HD Video Industry Co.,Ltd. Address before: 250101 west area, North 1st floor, S06 building, 1036 Chaochao Road, high tech Zone, Jinan City, Shandong Province Applicant before: Shandong Inspur Yunman Intelligent Technology Co.,Ltd. Address after: 250101 west area, North 1st floor, S06 building, 1036 Chaochao Road, high tech Zone, Jinan City, Shandong Province Applicant after: Shandong Inspur Yunman Intelligent Technology Co.,Ltd. Address before: 250101 west area, North 1st floor, S06 building, 1036 Chaochao Road, high tech Zone, Jinan City, Shandong Province Applicant before: SHANDONG YUNMAN INTELLIGENT TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |