CN112328926B - 基于网页的文字段落折叠展开方法 - Google Patents
基于网页的文字段落折叠展开方法 Download PDFInfo
- Publication number
- CN112328926B CN112328926B CN202011210378.6A CN202011210378A CN112328926B CN 112328926 B CN112328926 B CN 112328926B CN 202011210378 A CN202011210378 A CN 202011210378A CN 112328926 B CN112328926 B CN 112328926B
- Authority
- CN
- China
- Prior art keywords
- calculating
- character
- data
- text
- width
- 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
Images
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
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种基于网页的文字段落折叠展开方法,包括:设定文字隐藏显示最大行数n、文字显示的行高h和文字显示的宽度w;计算文字数据中的换行符和回车符的数量r;首先判断n是否等于1;在n等于1时,判断r是否等于0;在r不等于0时设置显示文字数据的容器元素的高度为n*h并显示展示功能按钮;在r等于0时计算文字数据的宽度W,和文字数据显示的实际行数L,并判断L是否大于n;若L大于n则设置显示文字数据的容器元素的高度为n*h并显示展示功能按钮,若L小于等于n则设置显示文字数据的容器元素的高度为L*h并隐藏展示功能按钮。本发明的基于网页的文字段落折叠展开方法,保留了文字数据的原始数据格式,实用性更高。
Description
技术领域
本发明涉及一种基于网页的文字段落折叠展开方法。
背景技术
随着互联网技术的发展,越来越多的人们通过互联网获取信息。如何提高网页与用户的交互是各大网页提供商关注的焦点。
在进行网页设置时,经常需要考虑到将较多的内容进行折叠,使得网页的页面保持清洁简练。现有的网页文字段落多行折叠展开的功能大多基于对网页css功能的文字溢出省略属性样式设置。
现有技术的主要缺陷在于:(1)需要完成各浏览器兼容性写法,且还需结合别的css属性来完成效果,写法固定单一,稳定性和可变性较差。(2)性能不足,不能很好地进行保留文字段落原始数据格式的展示效果,无法适用某些场景,不够通用。
发明内容
为解决现有技术的不足,本发明提供了一种可以解决上述问题的基于网页的文字段落折叠展开方法。
为了实现上述目标,本发明采用如下的技术方案:
一种基于网页的文字段落折叠展开方法,包含以下步骤:
S1:获取一段待显示的文字数据;
S2:设定文字隐藏显示最大行数n、文字显示的行高h以及文字显示的宽度w;
S3:计算文字数据中的换行符和回车符的数量r;
S4:判断n是否等于1;
若步骤S4的判断结果为是,则跳入步骤S5:判断r是否等于0;
若步骤S5的判断结果为否,则跳入步骤S6:设置显示文字数据的容器元素的高度为n*h;
S7:显示展示功能按钮;
若步骤S5的判断结果为是,则跳入步骤S8:计算文字数据的宽度W;
S9:根据w和W计算文字数据显示的实际行数L;
S10:判断L是否大于n;
若步骤S10的判断结果为是,则跳入步骤S6;
若步骤S10的判断结果为否,则跳入步骤S11:设置显示文字数据的容器元素的高度为L*h;
S12:隐藏展示功能按钮。
进一步地,若步骤S4的判断结果为否,则跳入步骤S13:判断r是否等于0;
若步骤S13的判断结果为是,则跳入步骤S8。
进一步地,若步骤S13的判断结果为否,则跳入步骤S14:判断r是否大于n-1;
若步骤S14的判断结果为是,则跳入步骤S6。
进一步地,若步骤S14的判断结果为否,则跳入步骤S15:将文字数据按照换行符和回车符截断成r+1段子文字数据;
S16:计算每个子文字数据的宽度wi(i=1,2,3…r+1);
S17:根据wi和w计算每个子文字数据显示的实际行数li(i=1,2,3…r+1),计算所有子文字数据的总行数L总。
进一步地,在步骤S17之后,基于网页的文字段落折叠展开方法还包括:
S18:判断L总是否大于n;
若步骤S18的判断结果为是,则跳入步骤S6;
若步骤S18的判断结果为否,则跳入步骤S19:设置显示文字数据的容器元素的高度为L总*h,接着跳入步骤S12。
进一步地,步骤S3中计算文字数据中的换行符和回车符的数量r的具体方法为:
将用于计算文字数据中的换行符和回车符的数量的方法封装为第一计算器;
将文字数据输入第一计算器计算文字数据中的换行符和回车符的数量r。
进一步地,将用于计算文字数据中的换行符和回车符的数量的方法封装为第一计算器的具体方法为:
将用于计算文字数据中包含的换行符和回车符的数量的正则表达式封装为第一计算器。
进一步地,步骤S8中计算文字数据的宽度W的具体方法为:
将用于计算文字数据的宽度的方法封装为第二计算器;
将文字数据和字体属性输入第二计算器计算文字数据的宽度W。
进一步地,用于计算文字数据的宽度的方法为网页画布提供的计算文字宽度方法measureText。
进一步地,字体属性包括字体类型,字体大小和字体粗细。
本发明的有益之处在于提供的基于网页的文字段落折叠展开方法,增加了网页文字段落折叠展开效果展示的可用性和实现方法的可选择性,并且在此基础上实现保留文字段落的原始数据格式,实用性更高。该方法能够适用于支持网页画布方法的各类浏览器版本,并且可以很好地保留文字数据格式。
附图说明
图1是本发明的基于网页的文字段落折叠展开方法的流程图。
具体实施方式
以下结合附图和具体实施例对本发明作具体的介绍。
如图1所示为一种基于网页的文字段落折叠展开方法的流程图,主要包含以下步骤:
S1:获取一段待显示的文字数据。文字数据可能包含回车符和换行符。
S2:设定文字隐藏显示最大行数n、文字显示的行高h以及文字显示的宽度w。文字隐藏显示最大行数n是指其要折叠显示时最多显示的行数,在折叠时,剩余行数被隐藏。文字显示的行高h以及文字显示的宽度w为文字数据在网页的容器元素中显示的宽度和高度。在网页中写入显示该段文字数据的容器元素时,容器元素的宽度和文字行高上述规定的相同。在容器元素外写入一个展示收起功能按钮,该展示收起功能按钮用于触发和响应容器元素中文字的折叠与展开。
S3:计算文字数据中的换行符和回车符的数量r。在本实施例中,计算文字数据中的换行符和回车符的数量r的具体方法为:将用于计算文字数据中的换行符和回车符的数量的方法封装为第一计算器。将文字数据输入第一计算器计算文字数据中的换行符和回车符的数量r。
优选的,将用于计算文字数据中的换行符和回车符的数量的方法封装为第一计算器的具体方法为:将用于计算文字数据中包含的换行符和回车符的数量的正则表达式封装为第一计算器。
S4:判断n是否等于1。
若步骤S4的判断结果为是,则跳入步骤S5:判断r是否等于0。
若步骤S5的判断结果为否,则跳入步骤S6:设置显示文字数据的容器元素的高度为n*h。
S7:显示展示功能按钮。
若步骤S5的判断结果为是,则跳入步骤S8:计算文字数据的宽度W。计算文字数据的宽度W的具体方法为:将用于计算文字数据的宽度的方法封装为第二计算器。将文字数据和字体属性输入第二计算器计算文字数据的宽度W。其中,字体属性包括字体类型,字体大小和字体粗细等。
优选的,用于计算文字数据的宽度的方法为网页画布提供的计算文字宽度方法measureText。
S9:根据w和W计算文字数据显示的实际行数L。具体的,计算W/w+1的值,L为对W/w+1的结果取整。
S10:判断L是否大于n。
若步骤S10的判断结果为是,则跳入步骤S6。
若步骤S10的判断结果为否,则跳入步骤S11:设置显示文字数据的容器元素的高度为L*h。
S12:隐藏展示功能按钮。
作为一种优选的实施方式,若步骤S4的判断结果为否,则跳入步骤S13:判断r是否等于0。
若步骤S13的判断结果为是,则跳入步骤S8。
作为一种优选的实施方式,若步骤S13的判断结果为否,则跳入步骤S14:判断r是否大于n-1。
若步骤S14的判断结果为是,则跳入步骤S6。
作为一种优选的实施方式,若步骤S14的判断结果为否,则跳入步骤S15:将文字数据按照换行符和回车符截断成r+1段子文字数据。
S16:计算每个子文字数据的宽度wi(i=1,2,3…r+1)。该处计算子文字数据的宽度的方法与步骤S8相同。
S17:根据wi和w计算每个子文字数据显示的实际行数li(i=1,2,3…r+1),计算所有子文字数据的总行数L总。L总为所有子文字数据的实际行数li的和。
作为一种优选的实施方式,在步骤S17之后,基于网页的文字段落折叠展开方法还包括:
S18:判断L总是否大于n。
若步骤S18的判断结果为是,则跳入步骤S6。
若步骤S18的判断结果为否,则跳入步骤S19:设置显示文字数据的容器元素的高度为L总*h,接着跳入步骤S12。
以上显示和描述了本发明的基本原理、主要特征和优点。本行业的技术人员应该了解,上述实施例不以任何形式限制本发明,凡采用等同替换或等效变换的方式所获得的技术方案,均落在本发明的保护范围内。
Claims (4)
1.一种基于网页的文字段落折叠展开方法,其特征在于,包含以下步骤:
S1:获取一段待显示的文字数据;
S2:设定文字收起显示最大行数n、文字显示的行高h以及文字显示的宽度w;
S3:计算所述文字数据中的换行符和回车符的数量r;
S4:判断n是否等于1;
若步骤S4的判断结果为是,则跳入步骤S5:判断r是否等于0;
若步骤S5的判断结果为否,则跳入步骤S6:设置显示所述文字数据的容器元素的高度为n*h;
S7:显示展示功能按钮;
若步骤S5的判断结果为是,则跳入步骤S8:计算所述文字数据的宽度W;
S9:根据w和W计算所述文字数据显示的实际行数L;
S10:判断L是否大于n;
若步骤S10的判断结果为是,则跳入步骤S6;
若步骤S10的判断结果为否,则跳入步骤S11:设置显示所述文字数据的容器元素的高度为L*h;
S12:隐藏展示功能按钮;
若步骤S4的判断结果为否,则跳入步骤S13:判断r是否等于0;
若步骤S13的判断结果为是,则跳入步骤S8;
若步骤S13的判断结果为否,则跳入步骤S14:判断r是否大于n-1;
若步骤S14的判断结果为是,则跳入步骤S6;
若步骤S14的判断结果为否,则跳入步骤S15:将所述文字数据按照换行符和回车符截断成r+1段子文字数据;
S16:计算每个所述子文字数据的宽度wi(i=1,2,3…r+1);
S17:根据wi和w计算每个所述子文字数据显示的实际行数li(i=1,2,3…r+1),计算所有所述子文字数据的总行数L总;
在步骤S17之后,所述基于网页的文字段落折叠展开方法还包括:
S18:判断L总是否大于n;
若步骤S18的判断结果为是,则跳入步骤S6;
若步骤S18的判断结果为否,则跳入步骤S19:设置显示所述文字数据的容器元素的高度为L总*h,接着跳入步骤S12;
步骤S3中计算所述文字数据中的换行符和回车符的数量r的具体方法为:
将用于计算所述文字数据中的换行符和回车符的数量的方法封装为第一计算器;
将所述文字数据输入所述第一计算器计算所述文字数据中的换行符和回车符的数量r;
所述将用于计算所述文字数据中的换行符和回车符的数量的方法封装为第一计算器的具体方法为:
将用于计算所述文字数据中包含的换行符和回车符的数量的正则表达式封装为所述第一计算器。
2.根据权利要求1所述的基于网页的文字段落折叠展开方法,其特征在于,
步骤S8中计算所述文字数据的宽度W的具体方法为:
将用于计算所述文字数据的宽度的方法封装为第二计算器;
将所述文字数据和字体属性输入所述第二计算器计算所述文字数据的宽度W。
3.根据权利要求2所述的基于网页的文字段落折叠展开方法,其特征在于,
所述用于计算所述文字数据的宽度的方法为网页画布提供的计算文字宽度方法measureText。
4.根据权利要求3所述的基于网页的文字段落折叠展开方法,其特征在于,
所述字体属性包括字体类型,字体大小和字体粗细。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011210378.6A CN112328926B (zh) | 2020-11-03 | 2020-11-03 | 基于网页的文字段落折叠展开方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011210378.6A CN112328926B (zh) | 2020-11-03 | 2020-11-03 | 基于网页的文字段落折叠展开方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112328926A CN112328926A (zh) | 2021-02-05 |
CN112328926B true CN112328926B (zh) | 2022-11-01 |
Family
ID=74323023
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011210378.6A Active CN112328926B (zh) | 2020-11-03 | 2020-11-03 | 基于网页的文字段落折叠展开方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112328926B (zh) |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109408752A (zh) * | 2018-10-17 | 2019-03-01 | 天津字节跳动科技有限公司 | 在线文档展示方法、装置以及电子设备 |
CN111309324A (zh) * | 2020-01-20 | 2020-06-19 | 福建天泉教育科技有限公司 | Web端内容自适应显示的方法、存储介质 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10592831B2 (en) * | 2017-07-20 | 2020-03-17 | Rovi Guides, Inc. | Methods and systems for recommending actors |
-
2020
- 2020-11-03 CN CN202011210378.6A patent/CN112328926B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109408752A (zh) * | 2018-10-17 | 2019-03-01 | 天津字节跳动科技有限公司 | 在线文档展示方法、装置以及电子设备 |
CN111309324A (zh) * | 2020-01-20 | 2020-06-19 | 福建天泉教育科技有限公司 | Web端内容自适应显示的方法、存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN112328926A (zh) | 2021-02-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
Kottwitz | LaTeX cookbook: Over 90 hands-on recipes for quickly preparing LaTeX documents to solve various challenging tasks | |
CN102184249B (zh) | 基于移动终端的网页排版方法和装置 | |
US8959116B2 (en) | Storage of a document using multiple representations | |
US20130205202A1 (en) | Transformation of a Document into Interactive Media Content | |
MX2007008776A (es) | Presentacion de objetos grandes en pantallas pequenas. | |
WO2011072434A1 (en) | System and method for web content extraction | |
US8959432B2 (en) | Utilizing document structure for animated pagination | |
CN103135977A (zh) | 一种浏览器中输入信息的方法和装置 | |
US20110113318A1 (en) | Information processing device, method, and computer-readable recording medium recording program | |
KR102574306B1 (ko) | 동적 조판 | |
US7366978B1 (en) | Method and system for creating a grid-like coordinate system for addressing data contained in an irregular computer-generated table | |
US7134083B1 (en) | Method and system for generating button and tab user interface control components within the context of a hypertext markup language (HTML) based web page | |
CN103294819B (zh) | 采用html5技术对网页内容进行分页显示的方法 | |
CN102110108B (zh) | 一种对小样文件的处理方法及装置 | |
CN112328926B (zh) | 基于网页的文字段落折叠展开方法 | |
CN112433995A (zh) | 文件格式转换方法、系统、计算机设备及存储介质 | |
CN111597771A (zh) | 一种调整文档内容格式的方法、装置、电子设备及介质 | |
JP2010157065A (ja) | 機械翻訳システム及び機械翻訳方法 | |
Raggett | Getting started with HTML | |
US20220156446A1 (en) | Device Dependent Rendering of PDF Content Including Multiple Articles and a Table of Contents | |
CN113962193A (zh) | 表格排版方法、装置、电子设备及存储介质 | |
CN114564915A (zh) | 文本排版方法、电子设备及存储介质 | |
JP2014021694A (ja) | 携帯情報端末、携帯情報端末の表組表示方法、及び携帯情報端末の表組表示プログラム | |
JP5707937B2 (ja) | 電子文書変換装置及び電子文書変換方法 | |
JP2010157066A (ja) | 機械翻訳システム及び機械翻訳方法 |
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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |