CN113408241A - 文本数据的处理方法、装置、电子设备及可读介质 - Google Patents

文本数据的处理方法、装置、电子设备及可读介质 Download PDF

Info

Publication number
CN113408241A
CN113408241A CN202110805242.8A CN202110805242A CN113408241A CN 113408241 A CN113408241 A CN 113408241A CN 202110805242 A CN202110805242 A CN 202110805242A CN 113408241 A CN113408241 A CN 113408241A
Authority
CN
China
Prior art keywords
text
display
container
displayed
attribute
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.)
Pending
Application number
CN202110805242.8A
Other languages
English (en)
Inventor
杨泽伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN202110805242.8A priority Critical patent/CN113408241A/zh
Publication of CN113408241A publication Critical patent/CN113408241A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/103Formatting, i.e. changing of presentation of documents
    • G06F40/109Font handling; Temporal or kinetic typography
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/103Formatting, i.e. changing of presentation of documents
    • G06F40/106Display of layout of documents; Previewing
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明实施例提供了一种文本数据的处理方法、装置、电子设备以及可读介质,所述方法包括:通过获取待显示文件以及与待显示文件对应的文本容器,该文本容器包括文本显示区域、省略符以及内容控件,在检测到待显示文本的文本长度超出文本显示区域时,在文本显示区域中显示待显示文本中的部分文本,并在部分文本的尾部显示省略符,以及在省略符的尾部显示内容控件,从而在文本显示过程中,当检测出文本的文本长度超出了容器的最大可显示区域时,以省略符对超出的文本进行省略显示,实现了多行文本的省略显示,通过显示内容控件可以实现对全部文本的显示,保证了文本显示的完整性,且该方式基于CSS技术实现,不受浏览器内核的限制,具有良好的兼容性。

Description

文本数据的处理方法、装置、电子设备及可读介质
技术领域
本发明涉及数据处理技术领域,特别是涉及一种文本数据的处理方法、一种文本数据的处理装置、一种电子设备以及一种计算机可读介质。
背景技术
文本溢出指的是当单行或多行文本在限定内容区域无法显示完整就会产生截断,被内容区域边界截断的文本成为文本溢出,文本溢出通常会对截断文本使用省略号代替并追加到内容区域的文本里的尾部。
在网页页面的显示过程中,如果文本的长度超出预设的显示区域,需要对超出显示区域的文本溢出使用省略显示的功能,例如,在显示区域的末端显示省略号,以代表当前文本没有完全显示,从而通过这种类型的显示可以告知用户还有更多内容未显示。在相关技术中,采用多种方式实现文本的省略显示功能,例如可以使用CSS3(CSS3是CSS技术的升级版本;其中,CSS的英文全称为CascadingStyleSheets,即层叠样式表)中的“Text-Overflow”,但是该方式仅能实现单行文本超出显示区域时的省略显示;还可以使用CSS3中的“-webkit-line-clamp”和“-webkit-nox-orient”实现文本的省略显示,但是该方式仅能应用在具有webkit内核的浏览器中,不能兼容其他内核的浏览器;另外,还可以使用JS实现文本的省略显示,但是借助JS处理多行文本溢出,需要动态进行大量的计算,容易降低网页页面的加载速度。
发明内容
本发明实施例是提供一种文本数据的处理方法、装置、电子设备以及计算机可读存储介质,以实现多行文本的省略显示,同时具有较好的兼容性。
本发明实施例公开了一种文本数据的处理方法,包括:
获取待显示文本以及与所述待显示文本对应的文本容器,所述文本容器包括文本显示区域、省略符以及内容控件;
若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本;
在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,所述内容控件用于显示所述待显示文本的全部文本。
可选地,所述文本容器配置有文本显示属性,所述若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本之前,所述方法还包括:
在所述文本容器中确定与所述文本显示属性对应的文本显示区域。
可选地,所述文本容器配置有文本溢出属性,所述在所述文本显示区域中显示所述待显示文本中的部分文本,包括:
根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本。
可选地,所述文本容器还配置有文本高度属性以及文本行高属性,所述根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本,包括:
采用所述文本高度属性与所述文本行高属性,确定所述文本容器的最大文本显示行数;
按照所述最大文本显示行数从所述待显示文本中确定第一文本以及第二文本,并采用所述文本溢出属性在所述文本显示区域中显示所述第一文本,并隐藏所述第二文本。
可选地,所述文本容器配置有与所述内容控件对应的控件显示属性,所述在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,包括:
根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置;
在所述第二显示位置显示所述省略符,以及在所述第一显示位置显示所述内容控件。
可选地,所述控件显示属性包括第一浮动属性以及控件高度属性,所述文本容器配置有与所述内容控件对应的占位元素以及所述占位元素的第二浮动属性,所述根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置,包括:
控制所述内容控件沿与所述第一浮动属性匹配的浮动方向在所述文本容器中进行浮动,确定所述内容控件在所述文本容器的第一初始位置;
采用所述控件高度属性与所述文本高度属性,确定所述占位元素的显示高度;
控制所述占位元素沿与所述第二浮动属性匹配的浮动方向在所述文本容器中进行浮动,并按照所述显示高度控制所述占位元素对所述内容控件进行位置调整,使所述内容控件在所述文本容器的第一初始位置调整为第一显示位置;
将所述第一显示位置的头部位置作为所述省略符的第二显示位置。
可选地,所述第一显示位置为位于所述文本容器右下角的位置。
可选地,还包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件。
可选地,所述内容控件包括展开控件以及收起控件,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,包括:
响应于针对所述展开控件的触发操作,在所述文本显示区域中显示所述待显示文本的全部文本,将所述展开控件切换为所述收起控件,并隐藏所述省略符。
可选地,所述文本容器配置有遮罩层元素,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件,包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中通过所述遮罩层元素对所述省略符进行隐藏,或,通过所述遮罩层对所述省略符和所述内容控件进行隐藏。
可选地,所述文本容器配置有容器尺寸属性,所述方法还包括:
确定与所述待显示文本对应的显示页面;
响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致。
可选地,所述容器尺寸属性包括宽度比例参数以及最大宽度尺寸,所述响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致,包括:
响应于检测到所述显示页面的尺寸变化,在所述最大宽度尺寸下按照所述宽度比例参数调节所述文本容器的宽度显示尺寸,使所述文本容器的宽度显示尺寸与所述显示页面的宽度显示尺寸保持一致。
本发明实施例还公开了一种文本数据的处理装置,包括:
文本容器获取模块,用于获取待显示文本以及与所述待显示文本对应的文本容器,所述文本容器包括文本显示区域、省略符以及内容控件;
文本显示模块,用于若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本;
文本溢出处理模块,用于在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,所述内容控件用于显示所述待显示文本的全部文本。
可选地,所述文本容器配置有文本显示属性,所述若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本之前,所述方法还包括:
在所述文本容器中确定与所述文本显示属性对应的文本显示区域。
可选地,所述文本容器配置有文本溢出属性,所述在所述文本显示区域中显示所述待显示文本中的部分文本,包括:
根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本。
可选地,所述文本容器还配置有文本高度属性以及文本行高属性,所述根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本,包括:
采用所述文本高度属性与所述文本行高属性,确定所述文本容器的最大文本显示行数;
按照所述最大文本显示行数从所述待显示文本中确定第一文本以及第二文本,并采用所述文本溢出属性在所述文本显示区域中显示所述第一文本,并隐藏所述第二文本。
可选地,所述文本容器配置有与所述内容控件对应的控件显示属性,所述在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,包括:
根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置;
在所述第二显示位置显示所述省略符,以及在所述第一显示位置显示所述内容控件。
可选地,所述控件显示属性包括第一浮动属性以及控件高度属性,所述文本容器配置有与所述内容控件对应的占位元素以及所述占位元素的第二浮动属性,所述根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置,包括:
控制所述内容控件沿与所述第一浮动属性匹配的浮动方向在所述文本容器中进行浮动,确定所述内容控件在所述文本容器的第一初始位置;
采用所述控件高度属性与所述文本高度属性,确定所述占位元素的显示高度;
控制所述占位元素沿与所述第二浮动属性匹配的浮动方向在所述文本容器中进行浮动,并按照所述显示高度控制所述占位元素对所述内容控件进行位置调整,使所述内容控件在所述文本容器的第一初始位置调整为第一显示位置;
将所述第一显示位置的头部位置作为所述省略符的第二显示位置。
可选地,所述第一显示位置为位于所述文本容器右下角的位置。
可选地,还包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件。
可选地,所述内容控件包括展开控件以及收起控件,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,包括:
响应于针对所述展开控件的触发操作,在所述文本显示区域中显示所述待显示文本的全部文本,将所述展开控件切换为所述收起控件,并隐藏所述省略符。
可选地,所述文本容器配置有遮罩层元素,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件,包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中通过所述遮罩层元素对所述省略符进行隐藏,或,通过所述遮罩层对所述省略符和所述内容控件进行隐藏。
可选地,所述文本容器配置有容器尺寸属性,所述方法还包括:
确定与所述待显示文本对应的显示页面;
响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致。
可选地,所述容器尺寸属性包括宽度比例参数以及最大宽度尺寸,所述响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致,包括:
响应于检测到所述显示页面的尺寸变化,在所述最大宽度尺寸下按照所述宽度比例参数调节所述文本容器的宽度显示尺寸,使所述文本容器的宽度显示尺寸与所述显示页面的宽度显示尺寸保持一致。
本发明实施例还公开了一种电子设备,包括处理器、通信接口、存储器和通信总线,其中,所述处理器、所述通信接口以及所述存储器通过所述通信总线完成相互间的通信;
所述存储器,用于存放计算机程序;
所述处理器,用于执行存储器上所存放的程序时,实现如本发明实施例所述的方法。
本发明实施例还公开了一个或多个计算机可读介质,其上存储有指令,当由一个或多个处理器执行时,使得所述处理器执行如本发明实施例所述的方法。
本发明实施例包括以下优点:
在本发明实施例中,在需要显示文本时,可以通过获取待显示文件以及与待显示文件对应的文本容器,该文本容器包括文本显示区域、省略符以及内容控件,在文本显示区域中显示待显示文本的过程中,可以先确定文本容器的文本显示区域,并在检测到待显示文本的文本长度超出文本显示区域时,在文本显示区域中显示待显示文本中的部分文本,并在部分文本的尾部显示省略符,以及在省略符的尾部显示内容控件,从而在文本显示过程中,当检测出文本的文本长度超出了容器的最大可显示区域时,以省略符对超出的文本进行省略显示,实现了多行文本的省略显示,并且通过显示内容控件可以实现对全部文本的显示,保证了文本显示的完整性,以及该方式基于CSS技术实现,不受浏览器内核的限制,具有良好的兼容性。
附图说明
图1是本发明实施例中提供的一种文本数据的处理方法的步骤流程图;
图2是本发明实施例中提供的文本容器的示意图;
图3是本发明实施例中提供的文本容器的示意图;
图4是本发明实施例中提供的文本容器的示意图;
图5是本发明实施例中提供的一种文本数据的处理装置的结构框图;
图6是本发明实施例中提供的一种电子设备的框图;
图7是本发明实施例中提供的一种计算机可读介质的示意图。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂,下面结合附图和具体实施方式对本发明作进一步详细的说明。
作为一种示例,处理多行文本溢出是前端开发中出现频率最高的开发场景,90%的网站都会应用该开发场景。在使用多行文本溢出处理长文本时,主要通过设定文本最多占位显示多少行,若文本过长产生溢出,则溢出部分自动隐藏并使用省略号收尾,从而告知用户还有更多内容未显示。
其中,对于多行文本溢出的相关方式可以使用纯CSS完成相关处理,具体如下:display声明文本容器为旧版Flex模型,overflow声明溢出文本容器的内容自动隐藏,text-overflow声明溢出文本容器的内容使用省略号收尾,box-orient声明文本容器使用竖向方式排列文本,line-clamp声明文本容器最多只能显示3行文本。可以理解的是,虽然整体代码简洁且语义化,但从中可知五个核心属性中有三个属性自带webkit前缀,意味着该方案只能用于仅支持Webkit内核的浏览器,例如只支持Chrome和大部分Safari,而在其他浏览器(如小部分Sarafi、Firefox、Opera、IE等)却无法显示或完美兼容。
此外,对于点击切换控件展示或收起溢出内容、动态自适应显示切换控件以及解决兼容问题等情况,都需要通过JavaScript(下述JS)控制。然而,即时借助JavaScript处理多行文本溢出,需要动态计算文本宽度、动态截取文本个数、动态追踪最后字符是否在文本容器内、动态为文本容器内最后字符追加省略号、动态计算切换控件是否显示等等,由于整体情况均基于动态实现,有动态即意味着需要浏览器进行计算,有浏览器计算即意味着有DOM操作,有DOM操作即意味着必定引发浏览器的回流重绘。
由此可见,在相关实现多行文本溢出控制的过程中,存在如下问题:1、使用纯CSS方式实现的多行文本溢出在兼容性上存在诸多问题,且实现效果也仅仅只是溢出内容自动追加省略号;2、多行文本溢出的多种交互行为需要借助JS实现,使用JS操作DOM必然引起JS执行线程与GUI(Graphical User Interface,图形用户界面)渲染线程的切换与通讯,从而引发更多的性能瓶颈,如增加了浏览器的性能开销,降低文本显示的加载速度;3、借助JS实现多行文本溢出的效果需要不断动态计算scrollHeight、offsetHeight、nodeValue等浏览器属性,不停地读取设置意味着需要不断地操作DOM,每触发一次切换控件就需要重新执行一次多行文本溢出的逻辑代码,无形之中又增加了性能开销,降低了文本显示的加载速度;4、使用JS的行为已被封装成很多工具库,但每次开发一个常用的功能都引入一些第三方代码库,不仅会引入更多的代码使打包体积变得更大,也会因为这些第三方代码库包含一些无用代码或存在某些漏洞而使整个项目的质量大大降低。
对此,本发明实施例的核心发明点之一在于使用纯CSS实现多行文本溢出的控制,通过获取待显示文本以及与待显示文本对应的文本容器,该文本容器中包括文本显示区域、省略符以及内容控件,在文本显示区域中显示待显示文本的过程中,可以先确定文本容器的文本显示区域以及待显示文本的文本长度,若检测到待显示文本的文本长度超出文本显示区域,则在文本显示区域中显示待显示文本中未超出的部分文本,并在这部分文本的尾部显示省略符以及在省略符的尾部显示内容控件,从而在文本显示过程中,当检测出文本的文本长度超出了容器的最大可显示区域时,以省略符对超出的文本进行省略显示,实现了多行文本的省略显示,并且通过显示内容控件可以实现对全部文本的显示,保证了文本显示的完整性,以及该方式基于CSS技术实现,不受浏览器内核的限制,具有良好的兼容性。
具体的,参照图1,示出了本发明实施例中提供的一种文本数据的处理方法的步骤流程图,具体可以包括如下步骤:
步骤101,获取待显示文本以及与所述待显示文本对应的文本容器,所述文本容器包括文本显示区域、省略符以及内容控件;
在本发明实施例中,待显示文本可以包括前端显示页面中显示的长文本,对于这类长文本,其往往受限于显示页面的大小或文本篇幅的影响,无法完整地显示所有的文本内容,因此需要对这类文本进行多行文本溢出控制,实现对溢出部分进行自动隐藏。
其中,为了实现对多行文本的溢出控制,可以通过定义一文本容器,并通过该文本容器在文本显示的过程中,实现多行文本溢出的控制。可选地,对于文本容器,其可以为HTML结构,该结构包括<div>、<input>、<label>以及<p><!--xx-->等结构,其中,<div>可以作为文本容器中用于包裹整个多行文本溢出模块,<input>与<label>用于模拟内容切换控件,<p>可以为文本容器中的注释部分,<!--xx-->用于存放文本(xx即为文本),整体结构简单明了且容易植入,每个标签语义化的同时执行自身相关的语义化工作,通过定义该结构,使得文本容器的维护只需要维护一套样式代码,无需维护其他脚本代码,大大减少了维护代码的成本,且无需再引入第三方代码库,有效减少了代码的体积。可选地,可以使用multiline-text-x作为文本容器的类名进行示例性说明。
在具体实现中,通过对文本容器进行结构的定义,可以有效在实现多行文本省略显示的同时,减少代码体积,提高兼容的可靠性。在文本显示的过程中,通过上述结构形成的文本容器可以包括文本显示区域、省略符以及内容控件,文本显示区域可以为文本容器中能够显示文本的区域,省略符可以用于表征所显示文本中被省略的文本(省略符可以包括省略号、破折号或其他预设符号),内容控件可以用于对文本显示进行切换(包括从省略显示切换为全部显示,以及从全部显示切换为省略显示等)。
步骤102,若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本;
在本发明实施例中,可以根据实际的需求(例如结合产品、结合交互界面等)对文本容器中所显示的文本进行显示区域的限定,包括显示于靠右显示、居中显示以及靠左显示等等。
在具体实现中,文本容器可以配置有文本显示属性,该文本显示属性可以为Float属性,该Float属性的属性值可以设定为right,即靠右对齐;也可以根据实际需求设定为center,即居中对齐;还可以设定为left,即靠左对齐等等,则对于文本容器的文本显示区域,可以根据文本显示属性中的属性值所确定的在文本容器中的相对位置。例如,若文本显示属性中的Float属性的属性值为left,即Float:left,表征将文本显示区域设置在文本容器中的最左侧,在进行文本显示的过程中,可以将文本以靠左显示的方式显示于文本容器中。此外,对于靠右与居中显示的处理过程,与靠左显示相同,在此不再赘述。
在显示文本的过程中,对于待显示文本,需要先确定文本容器的文本显示区域,若文本显示区域能够完整显示待显示文本,则不需要进行多行文本溢出控制;若文本显示区域无法完整显示待显示文本,则需要对超出文本显示区域的文本进行省略显示。其中,对于在文本显示区域中显示的部分文本可以是从待显示文本的起始位置开始显示的文本。
在具体实现中,文本容器可以配置有文本溢出属性,文本溢出属性可以用于防止文本容器内部内容溢出,则在显示文本的过程中,可以先获取待显示文本的文本长度,并将该文本长度与文本显示区域进行比对,若待显示文本的文本长度小于文本显示区域所对应的显示长度,则可以直接在文本显示区域中完整显示待显示文本的全部文本;若待显示文本的文本长度超出了文本显示区域,则根据文本溢出属性在文本显示区域中显示待显示文本中从起始位置开始的文本。
可选地,在文本容器中还可以配置文本高度属性以及文本行高属性,其中,文本高度属性可以设置文本容器中文本的最大高度,文本行高属性可以设置文本容器中文本行间的距离,则可以通过文本高度属性与文本行高属性,确定文本容器的最大文本显示行数(通过将两者相除,所得结果可以表示文本容器最多可以显示多少行文本),接着结合文本溢出属性从文本容器中确定与最大文本显示行数匹配的文本显示区域,从而将待显示文本中溢出的文本进行隐藏,实现多行文本中溢出内容的省略显示。
其中,最大文本显示行数可以用于确定文本容器当前能够显示的最大行数,文本溢出属性可以用于对溢出的文本进行隐藏,则在显示文本的过程中,可以按照最大文本显示行数从待显示文本中确定第一文本以及第二文本,其中,第一文本可以为能够显示于文本显示区域内的文本,第二文本可以为溢出文本显示区域的文本,接着采用文本溢出属性在文本显示区域中显示第一文本,并隐藏第二文本,从而在文本显示过程中,当检测出文本的文本长度超出了容器的最大可显示区域,对溢出的文本进行隐藏显示,实现对溢出文本的省略显示。
在一种示例中,文本溢出属性可以为overflow属性,通过该属性可以隐藏超出文本显示区域的文本,具体的,将overflow属性的属性值设置为hidden实现溢出文本的隐藏。此外,文本高度属性可以为Max-height,文本行高属性可以为line-height,两者相除为整数,可以表示文本容器最多可以显示多少行,从而通过Max-height与line-height计算文本容器能够显示的最大文本行数,并对待显示文本进行显示,同时结合overflow属性对溢出文本显示区域的文本进行隐藏,从而在文本显示过程中,当检测出文本的文本长度超出了容器的最大可显示区域,对溢出的文本进行隐藏显示,实现对溢出文本的省略显示。
此外,在实际中,多行文本不会使用太多行数限制,往往为3行左右,则对于最大文本显示行数的选择可以控制在1-5行内并使用for循环动态生成每行对应的Max-height。此外,对于每行的Max-height可以依据行数进行递增,例如,若单行行高为30px,则两行行高可以为60px等等,并以此类推,本发明对此不作限制。
步骤103,在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,所述内容控件用于显示所述待显示文本的全部文本。
当待显示文本的文本长度超出了文本容器的文本显示区域时,可以在文本显示区域中显示待显示文本的部分文本,同时在该部分文本的尾部显示对应的省略符,以及在省略符的尾部显示内容控件,通过该内容控件可以显示待显示文本的全部文本。可选地,可以通过内容控件对文本容器所显示的文本进行切换,如从省略显示切换为完整显示,或从完整显示切换为省略显示等等,从而通过文本容器对待显示文本进行显示的过程中,由于文本容器基于纯CSS实现多行文本溢出处理逻辑,无需JS参与浏览器计算与DOM操作,大大减少页面回流重绘的频率,提升了多行文本溢出处理的渲染性能,提高了文本的加载速度。
此外,在对待显示文本进行溢出省略显示的过程中,可以响应于检测到文本显示区域中显示了待显示文本的全部文本,在文本容器中隐藏省略符,或,隐藏省略符与内容控件。具体的,随着文本容器显示尺寸的变化或浏览的用户通过内容控件切换文本容器中文本的显示模式,使得文本容器的文本显示区域中显示了待显示文本的全部文本时,此时已经不需要进行溢出省略显示了,则可以隐藏省略符,或,隐藏省略符和内容控件,从而在完整显示文本时,减少了文本容器中其他元素的显示,保证文本容器显示的简洁性,提高加载速度。
在一种示例中,内容控件可以包括展开控件以及收起控件,则可以响应于针对展开控件的触发操作,在文本显示区域中显示待显示文本的全部文本,将展开控件切换为收起控件,并隐藏省略符。此外,还可以响应针对收起控件的触发操作,在文本显示区域中显示待显示文本的部分文本,在该部分文本的尾部显示省略符,以及将收起控件切换为展开控件,从而用户可以根据实际的需求选择待显示文本的显示模式,提高了文本显示的灵活性。
可选地,文本容器配置有与内容控件对应的控件显示属性,控件显示属性可以用于确定内容控件在文本容器的显示位置,并根据所确定的内容控件的显示位置对省略符的显示位置进行确定,则在对待显示文本进行溢出省略显示时,可以先根据控件显示属性与文本高度属性,在部分文本的尾部确定内容控件的第一显示位置,并将第一显示位置的头部位置作为省略符的第二显示位置,接着在第二显示位置显示省略符,以及在第一显示位置显示内容控件。
在具体实现中,控件显示属性包括第一浮动属性以及控件高度属性,文本容器配置有与内容控件对应的占位元素以及占位元素的第二浮动属性,则可以通过控制内容控件沿与第一浮动属性匹配的浮动方向在文本容器中进行浮动,确定内容控件在文本容器的第一初始位置,并采用控件高度属性与文本高度属性,确定占位元素的显示高度,接着控制占位元素沿与第二浮动属性匹配的浮动方向在文本容器中进行浮动,并按照显示高度控制占位元素对内容控件进行位置调整,使内容控件在文本容器的第一初始位置调整为第一显示位置,然后将第一显示位置的头部位置作为省略符的第二显示位置。
在显示内容控件时,可以将其显示位置设置在文本容器的右下角位置,使得文本容器在对待显示文本进行溢出省略显示时,可以符合文本的阅读顺序,保证文本省略显示的合理性。具体的,在文本容器中可以使用<input>模拟控件(通过设置控件属性Type的属性值为button开启文本容器的控件切换模式),并为其定义对应的控件显示属性,控件显示属性包括第一浮动属性,为Float属性,该Float属性的属性值可以设定为right,即靠右对齐;也可以根据实际需求设定为center,即居中对齐;还可以设定为left,即靠左对齐等等。例如,若第一浮动属性中的Float属性的属性值为right,即Float:right,表征将文本显示区域设置在文本容器中的最右侧,在进行文本显示的过程中,可以将文本以靠右显示的方式显示于文本容器中。此外,对于靠左与居中显示的处理过程,与靠右显示相同,在此不再赘述。
此外,可以将内容控件的控件高度属性设置为与文本行高属性相同的属性值,从而保证内容控件与文本的显示高度一致。参照图2,示出了本发明实施例中提供的文本容器的示意图,文本容器20中以多行显示的方式对待显示文本进行显示,假设显示了3行文本210,则根据上述描述,内容控件220的显示位置为位于右上角的位置,可以理解的是,内容控件显示于右上角的位置并不是期望的位置,而是需要将其调整至右下角的位置。
对此,在文本容器中配置有与内容控件对应的占位元素,为了不让HTML结构有太多冗余元素,可以使用::before伪元素代替该占位元素的占位。具体的,可以根据多个元素产生浮动效果时,将多余元素往下一行(或列)挤的原理,在内容控件前追加一个占位元素并同样声明第二浮动属性(即Float属性)对内容控件进行挤压,使得内容控件能够准确定位在文本容器的右下角。并且,在该过程中,除了对占位元素配置第二浮动属性,还需要设置该占位元素的元素高度,否者仅能将内容控件挤下一行,而无法保证内容控件定位于文本容器的右下角,对此,该占位元素的元素高度可以为文本高度属性与控件高度属性之间的差值,从而在将内容控件挤压至右下角的过程中,由于内容控件与占位元素均位于文本容器的最右侧,且占位元素位于内容控件之前,接着占位元素可以根据文本容器的高度减去内容控件的高度所得值对内容控件进行挤压定位,进而使得内容控件可以定位于文本容器的右下角。参照图3,示出了本发明实施例中提供的文本容器的示意图,文本容器30中以多行显示的方式对待显示文本进行显示,假设显示了3行文本,其中,基于浮动特性完成控件的右下角定位后,占位元素310将内容控件320挤压至右下角,此时占位元素310具有一定的宽度,则可以声明该占位元素310的宽度为0,并使用::before伪元素代替该元素的占位以保证不让HTML结构有太多冗余元素,最终如图4所示,示出了本发明实施例中提供的文本容器的示意图,文本容器40中的内容控件410定位显示于右下角。
需要说明的是,可以使用纯CSS方式模拟内容控件触发事件带动文本容器和内容控件切换状态,具体的,当内容控件处于选中状态时触发:checked,通过同胞选择器(+或~)带动后面元素一起进入选中状态,反之同样处理。由于已经定义了文本容器的HTML结构,<input>与<labal>可以通过id与for关联起来,点击<label>就会控制<input>触发:checked,而内容控件映射的HTML结构(multiline-text-checkbox)与文本(multiline-text-wrapper)HTML结构相邻,因此可通过.multiline-text-checkbox+.multiline-text-wrapper的方式声明选中状态下的样式。若碰到需动态修改内容的情况,可使用伪类content生成技术模拟,具体做法是移除内容控件里的文字,采用伪元素生成,在不同状态通过attr()获取元素里的自定义元素并将值赋值到伪元素的content中。内容控件就是将<label>的data-true和data-false的值提取出来在不同状态下赋值到<label>的::after伪元素里。
对于省略符的显示,由于省略号一直在内容控件前面,为了不让HTML结构有太多冗余元素就使用::before伪元素代模拟省略符的占位。并且,依据实际情况可知,当内容控件文本为展开则省略符显示,当内容控件文本为收起则省略符隐藏。可以理解的是,对于省略符的位置确定可以参考根据浮动效果对内容控件的位置进行确定的过程,即按照占位元素-内容控件-省略符的浮动方式,确定省略符的显示位置,在此不再赘述。
在本发明实施例中,为了实现在文本完整显示时对省略符,或,省略符和内容控件进行隐藏,可以在文本容器配置有遮罩层元素,则可以响应于检测到文本显示区域中显示了待显示文本的全部文本,在文本容器中通过遮罩层元素对省略符进行隐藏,或,通过遮罩层对省略符和内容控件进行隐藏。
在具体实现中,由于CSS中不存在判断逻辑,因此可根据多个元素产生定位效果时可将多余元素遮住的原理(文档脱流表现),在省略符前追加一个遮罩层元素并声明其定位将省略符、内容控件遮住。而实质上省略符、内容控件还在当前位置,由于定位元素的z-index层级比正常流的元素高,所以形成遮盖效果。并且,为了不让HTML结构有太多冗余元素就使用::after伪元素代替该元素的占位,从而当内容控件为展开则遮罩层显示,当内容控件为收起则遮罩层隐藏。可选地,对于遮罩层元素的背景可以根据实际需求进行设置,并以与交互界面匹配为准,本发明对此不作限制。
可选地,文本容器还可以配置有容器尺寸属性,容器尺寸属性可以用于控制文本容器的显示尺寸,则可以通过响应于检测到显示页面的尺寸变化,根据容器尺寸属性自适应调整文本容器的显示尺寸,使文本容器的显示尺寸与显示页面的显示尺寸保持一致,从而随着显示页面尺寸的变化(如从全屏变化为半屏显示,或从半屏变化为全屏显示等),文本容器可以随之进行自适应地调整,灵活地对待显示文本的显示进行切换,保证用户的浏览体验。
其中,容器尺寸属性可以包括宽度比例参数以及最大宽度尺寸,则调整文本容器显示尺寸的过程可以为响应于检测到显示页面的尺寸变化,在最大宽度尺寸下按照宽度比例参数调节文本容器的宽度显示尺寸,使文本容器的宽度显示尺寸与显示页面的宽度显示尺寸保持一致。
例如,宽度比例参数width的属性值可以为100%,最大宽度尺寸Max-width的属性值可以为npx,使得文本容器可以自适应页面的宽度,且最大宽度可以为n像素。在具体实现中,考虑到待显示文本可以包括横向显示文本以及纵向显示文本,则下面对两种不同显示状态的待显示文本分别进行说明。
若待显示文本为横向显示文本,当该width为100%且高度自适应时,可以理解为用于显示该横向显示文本的文本容器的宽度为显示页面的宽度的100%,即文本容器的宽度与所属显示页面的宽度相同;文本容器的高度随着显示页面的变化可以自适应调整。假设待显示文本的文本长度较长,在文本容器中显示为多行时,随着显示页面的变化,文本容器的高度可以相应自动调整为与显示页面相匹配的高度,实现文本容器中待显示文本显示行数的变化。
若待显示文本为纵向文本时,上述文本容器的高度与显示页面的高度相同,文本容器的宽度与待显示文本的长度相匹配,则当width为100%且高度自适应时,可以理解为用于显示该横向显示文本的文本容器的高度为显示页面的高度的100%,即文本容器的高度与所属显示页面的高度相同;文本容器的高度随着显示页面的变化可以自适应调整。假设待显示文本的文本长度较长,在文本容器中显示为多列时,随着显示页面的变化,文本容器的宽度可以相应自动调整为与显示页面相匹配的宽度,实现文本容器中待显示文本显示列数的变化。
因此,对于文本容器,由于具备与页面自适应的调整功能,当检测到文本容器调整后的宽度或高度满足完整显示待显示文本时,可以在文本容器中隐藏省略符,或,隐藏省略符与内容控件,以保证文本显示的完整性。其中,对于文本容器显示尺寸的调整,可以包括对文本容器的拉伸操作,或对显示页面的拉伸操作,以及窗口放大操作等等,本发明对此不作限制。
在上述过程中,文本容器的开发均基于纯CSS代码,容器的整体开发均处于开发阶段,则可以将上述过程所涉及的原理与代码进行整合,使用Minix定义成一个输出函数,这样可以导入到不同的CSS模块供不同页面使用,使得通用功能实现共享化、模块化和工具化。例如,可以使用SASS函数,将共同变量抽离出来,如代码里的$line-height、$btn-top和$default-height,将这些输入参数$font-size与$line-ratio都间接计算出来,从而将一些共同的逻辑共享化、模块化和工具化,哪个页面需要就到输出到哪个页面,进而基于CSS技术实现多行文本溢出的控制,不受浏览器内核的限制,具有良好的兼容性,并且,上述过程所涉及的代码量小,有利于提高文本的加载速度。
需要说明的是,本发明实施例包括但不限于上述示例,可以理解的是,在本发明实施例的思想指导下,本领域技术人员还可以根据实际需求进行设置,本发明对此不作限制。
在本发明实施例中,在需要显示文本时,可以通过获取待显示文件以及与待显示文件对应的文本容器,该文本容器包括文本显示区域、省略符以及内容控件,在文本显示区域中显示待显示文本的过程中,可以先确定文本容器的文本显示区域,并在检测到待显示文本的文本长度超出文本显示区域时,在文本显示区域中显示待显示文本中的部分文本,并在部分文本的尾部显示省略符,以及在省略符的尾部显示内容控件,从而在文本显示过程中,当检测出文本的文本长度超出了容器的最大可显示区域时,以省略符对超出的文本进行省略显示,实现了多行文本的省略显示,并且通过显示内容控件可以实现对全部文本的显示,保证了文本显示的完整性,以及该方式基于CSS技术实现,不受浏览器内核的限制,具有良好的兼容性。
需要说明的是,对于方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明实施例并不受所描述的动作顺序的限制,因为依据本发明实施例,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作并不一定是本发明实施例所必须的。
参照图5,示出了本发明实施例中提供的一种文本数据的处理装置的结构框图,具体可以包括如下模块:
文本容器获取模块501,用于获取待显示文本以及与所述待显示文本对应的文本容器,所述文本容器包括文本显示区域、省略符以及内容控件;
文本显示模块502,用于若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本;
文本溢出处理模块503,用于在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,所述内容控件用于显示所述待显示文本的全部文本。
在本发明的一种可选实施例中,所述文本容器配置有文本显示属性,所述若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本之前,所述方法还包括:
在所述文本容器中确定与所述文本显示属性对应的文本显示区域。
在本发明的一种可选实施例中,所述文本容器配置有文本溢出属性,所述在所述文本显示区域中显示所述待显示文本中的部分文本,包括:
根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本。
在本发明的一种可选实施例中,所述文本容器还配置有文本高度属性以及文本行高属性,所述根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本,包括:
采用所述文本高度属性与所述文本行高属性,确定所述文本容器的最大文本显示行数;
按照所述最大文本显示行数从所述待显示文本中确定第一文本以及第二文本,并采用所述文本溢出属性在所述文本显示区域中显示所述第一文本,并隐藏所述第二文本。
在本发明的一种可选实施例中,所述文本容器配置有与所述内容控件对应的控件显示属性,所述在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,包括:
根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置;
在所述第二显示位置显示所述省略符,以及在所述第一显示位置显示所述内容控件。
在本发明的一种可选实施例中,所述控件显示属性包括第一浮动属性以及控件高度属性,所述文本容器配置有与所述内容控件对应的占位元素以及所述占位元素的第二浮动属性,所述根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置,包括:
控制所述内容控件沿与所述第一浮动属性匹配的浮动方向在所述文本容器中进行浮动,确定所述内容控件在所述文本容器的第一初始位置;
采用所述控件高度属性与所述文本高度属性,确定所述占位元素的显示高度;
控制所述占位元素沿与所述第二浮动属性匹配的浮动方向在所述文本容器中进行浮动,并按照所述显示高度控制所述占位元素对所述内容控件进行位置调整,使所述内容控件在所述文本容器的第一初始位置调整为第一显示位置;
将所述第一显示位置的头部位置作为所述省略符的第二显示位置。
在本发明的一种可选实施例中,所述第一显示位置为位于所述文本容器右下角的位置。
在本发明的一种可选实施例中,还包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件。
在本发明的一种可选实施例中,所述内容控件包括展开控件以及收起控件,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,包括:
响应于针对所述展开控件的触发操作,在所述文本显示区域中显示所述待显示文本的全部文本,将所述展开控件切换为所述收起控件,并隐藏所述省略符。
在本发明的一种可选实施例中,所述文本容器配置有遮罩层元素,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件,包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中通过所述遮罩层元素对所述省略符进行隐藏,或,通过所述遮罩层对所述省略符和所述内容控件进行隐藏。
在本发明的一种可选实施例中,所述文本容器配置有容器尺寸属性,所述方法还包括:
确定与所述待显示文本对应的显示页面;
响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致。
在本发明的一种可选实施例中,所述容器尺寸属性包括宽度比例参数以及最大宽度尺寸,所述响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致,包括:
响应于检测到所述显示页面的尺寸变化,在所述最大宽度尺寸下按照所述宽度比例参数调节所述文本容器的宽度显示尺寸,使所述文本容器的宽度显示尺寸与所述显示页面的宽度显示尺寸保持一致。
对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
另外,本发明实施例还提供一种电子设备,如图6所示,包括处理器601、通信接口602、存储器603和通信总线604,其中,处理器601,通信接口602,存储器603通过通信总线604完成相互间的通信,
存储器603,用于存放计算机程序;
处理器601,用于执行存储器603上所存放的程序时,实现如下步骤:
获取待显示文本以及与所述待显示文本对应的文本容器,所述文本容器包括文本显示区域、省略符以及内容控件;
若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本;
在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,所述内容控件用于显示所述待显示文本的全部文本。
在本发明的一种可选实施例中,所述文本容器配置有文本显示属性,所述若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本之前,所述方法还包括:
在所述文本容器中确定与所述文本显示属性对应的文本显示区域。
在本发明的一种可选实施例中,所述文本容器配置有文本溢出属性,所述在所述文本显示区域中显示所述待显示文本中的部分文本,包括:
根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本。
在本发明的一种可选实施例中,所述文本容器还配置有文本高度属性以及文本行高属性,所述根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本,包括:
采用所述文本高度属性与所述文本行高属性,确定所述文本容器的最大文本显示行数;
按照所述最大文本显示行数从所述待显示文本中确定第一文本以及第二文本,并采用所述文本溢出属性在所述文本显示区域中显示所述第一文本,并隐藏所述第二文本。
在本发明的一种可选实施例中,所述文本容器配置有与所述内容控件对应的控件显示属性,所述在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,包括:
根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置;
在所述第二显示位置显示所述省略符,以及在所述第一显示位置显示所述内容控件。
在本发明的一种可选实施例中,所述控件显示属性包括第一浮动属性以及控件高度属性,所述文本容器配置有与所述内容控件对应的占位元素以及所述占位元素的第二浮动属性,所述根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置,包括:
控制所述内容控件沿与所述第一浮动属性匹配的浮动方向在所述文本容器中进行浮动,确定所述内容控件在所述文本容器的第一初始位置;
采用所述控件高度属性与所述文本高度属性,确定所述占位元素的显示高度;
控制所述占位元素沿与所述第二浮动属性匹配的浮动方向在所述文本容器中进行浮动,并按照所述显示高度控制所述占位元素对所述内容控件进行位置调整,使所述内容控件在所述文本容器的第一初始位置调整为第一显示位置;
将所述第一显示位置的头部位置作为所述省略符的第二显示位置。
在本发明的一种可选实施例中,所述第一显示位置为位于所述文本容器右下角的位置。
在本发明的一种可选实施例中,还包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件。
在本发明的一种可选实施例中,所述内容控件包括展开控件以及收起控件,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,包括:
响应于针对所述展开控件的触发操作,在所述文本显示区域中显示所述待显示文本的全部文本,将所述展开控件切换为所述收起控件,并隐藏所述省略符。
在本发明的一种可选实施例中,所述文本容器配置有遮罩层元素,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件,包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中通过所述遮罩层元素对所述省略符进行隐藏,或,通过所述遮罩层对所述省略符和所述内容控件进行隐藏。
在本发明的一种可选实施例中,所述文本容器配置有容器尺寸属性,所述方法还包括:
确定与所述待显示文本对应的显示页面;
响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致。
在本发明的一种可选实施例中,所述容器尺寸属性包括宽度比例参数以及最大宽度尺寸,所述响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致,包括:
响应于检测到所述显示页面的尺寸变化,在所述最大宽度尺寸下按照所述宽度比例参数调节所述文本容器的宽度显示尺寸,使所述文本容器的宽度显示尺寸与所述显示页面的宽度显示尺寸保持一致。
上述终端提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect,简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture,简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示,图中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
通信接口用于上述终端与其他设备之间的通信。
存储器可以包括随机存取存储器(Random Access Memory,简称RAM),也可以包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。可选的,存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器可以是通用处理器,包括中央处理器(Central Processing Unit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(Digital Signal Processing,简称DSP)、专用集成电路(Application SpecificIntegrated Circuit,简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array,简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
如图7所示,在本发明提供的又一实施例中,还提供了一种计算机可读存储介质701,该计算机可读存储介质中存储有指令,当其在计算机上运行时,使得计算机执行上述实施例中所述的文本数据的处理方法。
在本发明提供的又一实施例中,还提供了一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行上述实施例中所述的文本数据的处理方法。
在上述实施例中,可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时,可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时,全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一个计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等,均包含在本发明的保护范围内。

Claims (15)

1.一种文本数据的处理方法,其特征在于,包括:
获取待显示文本以及与所述待显示文本对应的文本容器,所述文本容器包括文本显示区域、省略符以及内容控件;
若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本;
在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,所述内容控件用于显示所述待显示文本的全部文本。
2.根据权利要求1所述的方法,其特征在于,所述文本容器配置有文本显示属性,所述若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本之前,所述方法还包括:
在所述文本容器中确定与所述文本显示属性对应的文本显示区域。
3.根据权利要求1所述的方法,其特征在于,所述文本容器配置有文本溢出属性,所述在所述文本显示区域中显示所述待显示文本中的部分文本,包括:
根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本。
4.根据权利要求3所述的方法,其特征在于,所述文本容器还配置有文本高度属性以及文本行高属性,所述根据所述文本溢出属性在所述文本显示区域中显示待显示文本中的部分文本,包括:
采用所述文本高度属性与所述文本行高属性,确定所述文本容器的最大文本显示行数;
按照所述最大文本显示行数从所述待显示文本中确定第一文本以及第二文本,并采用所述文本溢出属性在所述文本显示区域中显示所述第一文本,并隐藏所述第二文本。
5.根据权利要求4所述的方法,其特征在于,所述文本容器配置有与所述内容控件对应的控件显示属性,所述在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,包括:
根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置;
在所述第二显示位置显示所述省略符,以及在所述第一显示位置显示所述内容控件。
6.根据权利要求5所述的方法,其特征在于,所述控件显示属性包括第一浮动属性以及控件高度属性,所述文本容器配置有与所述内容控件对应的占位元素以及所述占位元素的第二浮动属性,所述根据所述控件显示属性与所述文本高度属性,在所述部分文本的尾部确定所述内容控件的第一显示位置,并将所述第一显示位置的头部位置作为所述省略符的第二显示位置,包括:
控制所述内容控件沿与所述第一浮动属性匹配的浮动方向在所述文本容器中进行浮动,确定所述内容控件在所述文本容器的第一初始位置;
采用所述控件高度属性与所述文本高度属性,确定所述占位元素的显示高度;
控制所述占位元素沿与所述第二浮动属性匹配的浮动方向在所述文本容器中进行浮动,并按照所述显示高度控制所述占位元素对所述内容控件进行位置调整,使所述内容控件在所述文本容器的第一初始位置调整为第一显示位置;
将所述第一显示位置的头部位置作为所述省略符的第二显示位置。
7.根据权利要求5或6所述的方法,其特征在于,所述第一显示位置为位于所述文本容器右下角的位置。
8.根据权利要求1所述的方法,其特征在于,还包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件。
9.根据权利要求8所述的方法,其特征在于,所述内容控件包括展开控件以及收起控件,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,包括:
响应于针对所述展开控件的触发操作,在所述文本显示区域中显示所述待显示文本的全部文本,将所述展开控件切换为所述收起控件,并隐藏所述省略符。
10.根据权利要求8所述的方法,其特征在于,所述文本容器配置有遮罩层元素,所述响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中隐藏所述省略符,或,隐藏所述省略符与所述内容控件,包括:
响应于检测到所述文本显示区域中显示了所述待显示文本的全部文本,在所述文本容器中通过所述遮罩层元素对所述省略符进行隐藏,或,通过所述遮罩层对所述省略符和所述内容控件进行隐藏。
11.根据权利要求1所述的方法,其特征在于,所述文本容器配置有容器尺寸属性,所述方法还包括:
确定与所述待显示文本对应的显示页面;
响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致。
12.根据权利要求11所述的方法,其特征在于,所述容器尺寸属性包括宽度比例参数以及最大宽度尺寸,所述响应于检测到所述显示页面的尺寸变化,根据所述容器尺寸属性自适应调整所述文本容器的显示尺寸,使所述文本容器的显示尺寸与所述显示页面的显示尺寸保持一致,包括:
响应于检测到所述显示页面的尺寸变化,在所述最大宽度尺寸下按照所述宽度比例参数调节所述文本容器的宽度显示尺寸,使所述文本容器的宽度显示尺寸与所述显示页面的宽度显示尺寸保持一致。
13.一种文本数据的处理装置,其特征在于,包括:
文本容器获取模块,用于获取待显示文本以及与所述待显示文本对应的文本容器,所述文本容器包括文本显示区域、省略符以及内容控件;
文本显示模块,用于若检测到所述待显示文本的文本长度超出所述文本显示区域,则在所述文本显示区域中显示所述待显示文本中的部分文本;
文本溢出处理模块,用于在所述部分文本的尾部显示所述省略符,以及在所述省略符的尾部显示所述内容控件,所述内容控件用于显示所述待显示文本的全部文本。
14.一种电子设备,其特征在于,包括处理器、通信接口、存储器和通信总线,其中,所述处理器、所述通信接口以及所述存储器通过所述通信总线完成相互间的通信;
所述存储器,用于存放计算机程序;
所述处理器,用于执行存储器上所存放的程序时,实现如权利要求1-12任一项所述的方法。
15.一个或多个计算机可读介质,其上存储有指令,当由一个或多个处理器执行时,使得所述处理器执行如权利要求1-12任一项所述的方法。
CN202110805242.8A 2021-07-16 2021-07-16 文本数据的处理方法、装置、电子设备及可读介质 Pending CN113408241A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110805242.8A CN113408241A (zh) 2021-07-16 2021-07-16 文本数据的处理方法、装置、电子设备及可读介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110805242.8A CN113408241A (zh) 2021-07-16 2021-07-16 文本数据的处理方法、装置、电子设备及可读介质

Publications (1)

Publication Number Publication Date
CN113408241A true CN113408241A (zh) 2021-09-17

Family

ID=77686873

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110805242.8A Pending CN113408241A (zh) 2021-07-16 2021-07-16 文本数据的处理方法、装置、电子设备及可读介质

Country Status (1)

Country Link
CN (1) CN113408241A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114330232A (zh) * 2021-12-29 2022-04-12 北京字节跳动网络技术有限公司 一种文本显示方法、装置、设备及存储介质
CN114519334A (zh) * 2022-04-19 2022-05-20 北京金堤科技有限公司 具有标签的多行文本显示方法、装置、存储介质和电子设备
CN114598921A (zh) * 2022-03-07 2022-06-07 广东小天才科技有限公司 视频帧提取方法、装置、终端设备和存储介质
CN114625465A (zh) * 2022-03-14 2022-06-14 网易(杭州)网络有限公司 基于rn组件的文本展示方法及装置、设备、存储介质
WO2023078175A1 (zh) * 2021-11-04 2023-05-11 北京字跳网络技术有限公司 一种文本显示方法、装置、设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CA2356232A1 (en) * 2000-09-14 2002-03-14 George A. Hansen Dynamically resizable display elements
CN107589897A (zh) * 2017-09-20 2018-01-16 深圳天珑无线科技有限公司 终端控制方法、装置及非临时性计算机可读介质
CN107797736A (zh) * 2017-09-01 2018-03-13 五八有限公司 信息显示方法和装置
CN109597755A (zh) * 2018-10-25 2019-04-09 东软集团股份有限公司 文本显示的检测方法、装置、存储介质和电子设备
CN111460349A (zh) * 2020-03-31 2020-07-28 北京金山云网络技术有限公司 文本显示方法、装置和用户终端

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CA2356232A1 (en) * 2000-09-14 2002-03-14 George A. Hansen Dynamically resizable display elements
CN107797736A (zh) * 2017-09-01 2018-03-13 五八有限公司 信息显示方法和装置
CN107589897A (zh) * 2017-09-20 2018-01-16 深圳天珑无线科技有限公司 终端控制方法、装置及非临时性计算机可读介质
CN109597755A (zh) * 2018-10-25 2019-04-09 东软集团股份有限公司 文本显示的检测方法、装置、存储介质和电子设备
CN111460349A (zh) * 2020-03-31 2020-07-28 北京金山云网络技术有限公司 文本显示方法、装置和用户终端

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023078175A1 (zh) * 2021-11-04 2023-05-11 北京字跳网络技术有限公司 一种文本显示方法、装置、设备及存储介质
CN114330232A (zh) * 2021-12-29 2022-04-12 北京字节跳动网络技术有限公司 一种文本显示方法、装置、设备及存储介质
CN114598921A (zh) * 2022-03-07 2022-06-07 广东小天才科技有限公司 视频帧提取方法、装置、终端设备和存储介质
CN114598921B (zh) * 2022-03-07 2024-04-12 广东小天才科技有限公司 视频帧提取方法、装置、终端设备和存储介质
CN114625465A (zh) * 2022-03-14 2022-06-14 网易(杭州)网络有限公司 基于rn组件的文本展示方法及装置、设备、存储介质
CN114625465B (zh) * 2022-03-14 2023-09-08 网易(杭州)网络有限公司 基于rn组件的文本展示方法及装置、设备、存储介质
CN114519334A (zh) * 2022-04-19 2022-05-20 北京金堤科技有限公司 具有标签的多行文本显示方法、装置、存储介质和电子设备
CN114519334B (zh) * 2022-04-19 2022-07-08 北京金堤科技有限公司 具有标签的多行文本显示方法、装置、存储介质和电子设备

Similar Documents

Publication Publication Date Title
CN113408241A (zh) 文本数据的处理方法、装置、电子设备及可读介质
CA2937702C (en) Emphasizing a portion of the visible content elements of a markup language document
CN100465956C (zh) 用于向网站添加个人化的值的系统、Web服务器和方法
CN105740364B (zh) 页面处理方法及相关装置
US20080077879A1 (en) Interface with multiple rows of tabs having tabs at fixed relative positions
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
US20150169506A1 (en) Techniques for programmatic magnification of visible content elements of markup language documents
US20140351692A1 (en) Method for in-browser visual HTML editing via bi-directional navigation and virtual properties
CN112667330B (zh) 一种页面显示方法及计算机设备
CN106155654B (zh) 屏蔽网页操作的方法、装置及电子设备
CN105094622A (zh) 调节表格列宽的方法及设备
CN114579912A (zh) 页面布局方法、装置、设备及介质
CN110471700B (zh) 图形处理方法、装置、存储介质及电子设备
CN111783007B (zh) 一种显示渲染方法、装置、电子设备及存储介质
CN112015410A (zh) 网页编辑方法、装置、系统以及计算机存储介质
CN111914198A (zh) 一种实现浏览器兼容的方法、系统及电子设备
CN105468656B (zh) 网页背景图像生成方法和系统
KR101649822B1 (ko) 웹페이지 구축 장치 및 방법
CN103838709B (zh) 排版方法和排版引擎
US9594737B2 (en) Natural language-aided hypertext document authoring
CN113096217B (zh) 图片生成方法、装置、电子设备以及存储介质
CN111143734A (zh) 一种页面添加效果元素的方法及系统
CN112100546A (zh) 表单的加载方法、装置、存储介质和电子设备
CN114625465B (zh) 基于rn组件的文本展示方法及装置、设备、存储介质
CN112286603A (zh) 一种表格展示方法、装置、电子设备及存储介质

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