CN111460349A - 文本显示方法、装置和用户终端 - Google Patents

Abstract

本发明提供了一种文本显示方法、装置和用户终端，涉及云计算领域，首先通过预设的父级盒子确定待显示文本的最大显示区域；该父级盒子下属的子级盒子包括文本盒子和省略符；通过该文本盒子显示待显示文本；如果该待显示文本的长度超出上述最大显示区域，显示该最大显示区域对应的待显示文本中的一部分文本；然后通过该省略符盒子，在该一部分文本的尾部显示预设的省略符。该方法通过父级盒子确定的最大显示区域显示多行文本；当待显示文本的长度超出最大显示区域时，通过省略符实现省略显示，因而可以实现多行文本的省略显示；该方式基于css技术即可实现，不受浏览器内核的限制，具有较好的兼容性，同时代码量小，有利于提高网页页面的加载速度。

Description

文本显示方法、装置和用户终端

技术领域

本发明涉及数据处理技术领域，尤其是涉及一种文本显示方法、装置和用户终端。

背景技术

在网页页面的显示过程中，如果文本的长度超出预设的显示区域，需要对超出显示区域的文本使用省略显示的功能，例如在显示区域的末端显示省略号，以代表当前文本没有显示完全。相关技术中，可以采用多种方式实现文本的省略显示功能，例如，可以使用css3(css3是css技术的升级版本；其中，css的英文全称为cascading style sheets，中文为层叠样式表)中的“text-overflow”，但是该方式仅能实现单行文本超出显示区域时的省略显示；还可以使用css3中的“-webkit-line-clamp”和“-webkit-box-orient”实现文本的省略显示，但是该方式仅能应用在具有webkit内核的浏览器中，不能兼容其他内核的浏览器；另外，还可以使用js实现文本的省略显示，但是需要js(javascript，一种具有函数优先的轻量级，解释型或即时编译型的编程语言)和css相结合实现该功能，实现代码较多，容易降低网页页面的加载速度。

发明内容

本发明的目的在于提供一种文本显示方法、装置和用户终端，以实现多行文本的省略显示，同时具有较好的兼容性和加载速度。

本发明提供的一种文本显示方法，所述方法包括：通过预设的父级盒子确定待显示文本的最大显示区域；其中，所述父级盒子下属有子级盒子；所述子级盒子包括文本盒子和省略符盒子；通过所述文本盒子显示所述待显示文本；如果所述待显示文本的长度超出所述最大显示区域，显示所述最大显示区域对应的所述待显示文本中的一部分文本；通过所述省略符盒子，在所述一部分文本的尾部显示预设的省略符。

进一步的，所述文本盒子预设有第一浮动属性，所述第一浮动属性用于：将所述文本盒子设置在相对于所述父级盒子的第一指定区域；所述通过所述文本盒子显示所述待显示文本的步骤，包括：通过所述文本盒子，在所述第一指定区域显示所述待显示文本。

进一步的，如果所述待显示文本为横向显示文本，所述文本盒子的宽度与所述父级盒子的宽度相同；所述文本盒子的高度与所述待显示文本的长度相匹配；如果所述待显示文本为纵向显示文本，所述文本盒子的高度与所述父级盒子的高度相同；所述文本盒子的宽度与所述待显示文本的长度相匹配。

进一步的，所述父级盒子预设有溢出隐藏属性；所述溢出隐藏属性用于：隐藏超出所述最大显示区域的文本；所述显示所述最大显示区域对应的所述待显示文本中的一部分文本的步骤，包括：显示所述待显示文本中，在所述最大显示区域的范围内的一部分文本；隐藏所述待显示文本中，除所述最大显示区域的范围内的一部分文本以外的文本。

进一步的，所述省略符盒子预设有第二浮动属性，所述第二浮动属性用于：将所述省略符盒子设置在相对于所述父级盒子的第二指定区域；所述第二指定区域与所述一部分文本的尾部相对应；所述通过所述省略符盒子，在所述一部分文本的尾部显示预设的省略符的步骤，包括：通过所述省略符盒子，将预设的省略符显示在与所述一部分文本的尾部相对应的所述第二指定区域。

进一步的，所述省略符盒子还预设有位置属性；所述位置属性用于将所述省略符盒子设置在所述第二指定区域中的指定位置；所述指定位置为所述一部分文本的尾部。

进一步的，所述父级盒子下属的子级盒子，还包括空值盒子；所述空值盒子预设有第三浮动属性；所述第三浮动属性用于：将所述空值盒子设置在相对于所述父级盒子的第三指定区域；所述空值盒子用于：如果所述待显示文本的长度超出所述最大显示区域，将所述父级盒子的显示区域保持在所述最大显示区域；如果所述待显示文本的长度没有超出所述最大显示区域，将所述父级盒子的显示区域保持在与所述待显示文本的长度相匹配的显示区域。

本发明提供的一种文本显示装置，所述装置包括：确定模块，用于通过预设的父级盒子确定待显示文本的最大显示区域；其中，所述父级盒子下属有子级盒子；所述子级盒子包括文本盒子和省略符盒子；第一显示模块，用于通过所述文本盒子显示所述待显示文本；第二显示模块，用于如果所述待显示文本的长度超出所述最大显示区域，显示所述最大显示区域对应的所述待显示文本中的一部分文本；第三显示模块，用于通过所述省略符盒子，在所述一部分文本的尾部显示预设的省略符。

进一步的，所述文本盒子预设有第一浮动属性，所述第一浮动属性用于：将所述文本盒子设置在相对于所述父级盒子的第一指定区域；所述通过所述文本盒子显示所述待显示文本的步骤，包括：通过所述文本盒子，在所述第一指定区域显示所述待显示文本。

进一步的，如果所述待显示文本为横向显示文本，所述文本盒子的宽度与所述父级盒子的宽度相同；所述文本盒子的高度与所述待显示文本的长度相匹配；如果所述待显示文本为纵向显示文本，所述文本盒子的高度与所述父级盒子的高度相同；所述文本盒子的宽度与所述待显示文本的长度相匹配。

本发明提供的一种用户终端，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器执行所述机器可执行指令以实现上述任一项所述的文本显示方法。

本发明提供的一种机器可读存储介质，该机器可读存储介质存储有机器可执行指令，该机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现上述任一项所述的文本显示方法。

本发明提供的文本显示方法、装置和用户终端，首先通过预设的父级盒子确定待显示文本的最大显示区域；该父级盒子下属的子级盒子包括文本盒子和省略符；通过该文本盒子显示待显示文本；如果该待显示文本的长度超出上述最大显示区域，显示该最大显示区域对应的待显示文本中的一部分文本；然后通过该省略符盒子，在该一部分文本的尾部显示预设的省略符。该方法通过父级盒子确定的最大显示区域显示多行文本；当待显示文本的长度超出最大显示区域时，通过省略符实现省略显示，因而可以实现多行文本的省略显示；该方式基于css技术即可实现，不受浏览器内核的限制，具有较好的兼容性，同时代码量小，有利于提高网页页面的加载速度。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种文本显示方法的流程图；

图2为本发明实施例提供的另一种文本显示方法的流程图；

图3为本发明实施例提供的另一种文本显示方法的流程图；

图4为本发明实施例提供的另一种文本显示方法的流程图；

图5为本发明实施例提供的一种文本显示的结构示意图；

图6为本发明实施例提供的一种文本显示装置的结构示意图；

图7为本发明实施例提供的一种用户终端的结构示意图。

具体实施方式

下面将结合实施例对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

一般在WEB(World Wide Web，全球广域网)网页中，如果文本的长度超出预设的显示区域，需要对超出显示区域的文本使用省略显示的功能；目前，行业内的前端架构主要有以下三种方式来实现该功能：第一种方式是使用css3中的“text-overflow”，但是该方式只能实现单行文本溢出的省略号显示；第二种方式是使用css3的“-webkit-line-clamp”和“-webkit-box-orient”，但是该方式只能兼容webkit内核的浏览器，如chrome或移动端等，对其他内核的浏览器的兼容性不足；第三种方式是使用js，但是该方式只通过css还无法实现该功能，需要js和css相结合，因而实现代码较多，容易降低网页页面的加载速度。

基于此，本发明实施例提供了一种文本显示方法、装置和用户终端，该技术可以应用于各种浏览器的网页页面显示中。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种文本显示方法进行详细介绍；如图1所示，该方法包括如下步骤：

步骤S102，通过预设的父级盒子确定待显示文本的最大显示区域；其中，该父级盒子下属有子级盒子；该子级盒子包括文本盒子和省略符盒子。

上述父级盒子可以通过预先设置，以确定待显示文本的最大显示区域和待显示文本在页面中的位置，该父级盒子可以为其下属的子级盒子提供定位参照，其下属的子级盒子通常会在父级盒子确定的区域内移动，不会影响其他父级盒子确定的最大显示区域；比如，有的子级盒子在父级盒子确定的区域内的左侧，有的子级盒子在父级盒子确定的区域内的右侧等；上述待显示文本可以理解为网页页面中需要显示的文本，具体可以根据实际需求确定待显示文本的内容和长度；上述文本盒子可以用于显示该待显示的文本；上述省略符盒子可以用于显示省略符，该省略符可以为省略号、破折号或其他预设符号。

步骤S104，通过上述文本盒子显示上述待显示文本。

步骤S106，如果上述待显示文本的长度超出上述最大显示区域，显示该最大显示区域对应的待显示文本中的一部分文本。

在实际实现时，如果待显示文本的内容较多，导致在父级盒子所确定的待显示文本的最大显示区域内无法完全显示该待显示文本时，可以只显示该最大显示区域对应的待显示文本中的一部分文本，该一部分文本可以是从待显示文本的起始位置开始显示的文本。

步骤S108，通过上述省略符盒子，在上述一部分文本的尾部显示预设的省略符。

上述省略符可以是预先设定的用于表示省略显示功能的符号，比如省略号等；当在最大显示区域内只显示了待显示文本中的一部分文本时，可以在省略符盒子中显示预设的省略符，并将包含预设的省略符的省略盒子显示在上述一部分文本的尾部，以实现对超出最大显示区域的文本的省略显示。例如，当待显示文本为横向显示时，可以将上述省略符设置在最大显示区域的右下角，以在一部分文本的尾部显示省略符。

本发明提供的文本显示方法，首先通过预设的父级盒子确定待显示文本的最大显示区域；该父级盒子下属的子级盒子包括文本盒子和省略符；通过该文本盒子显示待显示文本；如果该待显示文本的长度超出上述最大显示区域，显示该最大显示区域对应的待显示文本中的一部分文本；然后通过该省略符盒子，在该一部分文本的尾部显示预设的省略符。该方法通过父级盒子确定的最大显示区域显示多行文本；当待显示文本的长度超出最大显示区域时，通过省略符实现省略显示，因而可以实现多行文本的省略显示；该方式基于css技术即可实现，不受浏览器内核的限制，具有较好的兼容性，同时代码量小，有利于提高网页页面的加载速度。

本发明实施例还提供了另一种文本显示方法，该方法在上述实施例方法的基础上实现；该方法重点描述通过文本盒子显示待显示文本的具体过程，具体对应下述步骤S204。

如图2所示，该方法包括如下步骤：

步骤S202，通过预设的父级盒子确定待显示文本的最大显示区域；其中，父级盒子下属有子级盒子；该子级盒子包括文本盒子和省略符盒子；文本盒子预设有第一浮动属性，该第一浮动属性用于：将该文本盒子设置在相对于父级盒子的第一指定区域。

在实际实现时，该第一浮动属性可以是float属性，该float属性的属性值可以设定为right，即靠右对齐，也可以根据实际需求设定为center，即居中对齐；或者设定为left，即靠左对齐等；上述第一指定区域可以理解为根据第一浮动属性中的属性值，所确定的文本盒子在父级盒子中的相对位置；比如，如果第一浮动属性中的float属性的属性值为right，即float：right，可以理解为将文本盒子设置在相对于父级盒子内部区域的最右侧。

步骤S204，通过上述文本盒子，在第一指定区域显示上述待显示文本。

考虑到根据预设的第一浮动属性，将文本盒子设置在了相对于父级盒子的第一指定区域，则在上述文本盒子中显示上述待显示文本时，相当于通过该文本盒子，在该第一指定区域显示该待显示文本。

通常还可以对上述文本盒子设置宽度属性和高度属性，比如宽度属性可以通过width属性来实现，width属性的属性值可以设置为100％；高度属性可以设置为高度为自适应；在实际实现时，考虑到待显示文本可以分为横向显示文本和纵向显示文本，下面对两种显示状态的待显示文本分别进行说明。

如果上述待显示文本为横向显示文本，上述文本盒子的宽度与父级盒子的宽度相同；该文本盒子的高度与待显示文本的长度相匹配。

如果待显示文本为横向显示文本，当该width参数为100％时，高度为自适应时，可以理解为用于显示该横向显示文本的文本盒子的宽度为父级盒子的宽度的100％，即文本盒子的宽度与父级盒子的宽度相同；文本盒子的高度随着待显示文本的长度可以自适应调整，比如，待显示文本的长度较长，在文本盒子中显示为多行时，文本盒子的高度相应自动调整为多行待显示文本相匹配的高度；如果待显示文本的长度较短，在文本盒子中显示为单行时，文本盒子的高度相应自动调整为单行待显示文本相匹配的高度，相当于文本盒子需要完全包裹待显示文本。

如果上述待显示文本为纵向显示文本，上述文本盒子的高度与父级盒子的高度相同；该文本盒子的宽度与待显示文本的长度相匹配。

如果待显示文本为纵向显示文本，当该width参数为100％时，高度为自适应时，可以理解为用于显示该纵向显示文本的文本盒子的高度为父级盒子的高度的100％，即文本盒子的高度与父级盒子的高度相同；文本盒子的宽度随着待显示文本的长度可以自适应调整；比如，待显示文本的长度较长，在文本盒子中显示为多列时，文本盒子的宽度相应自动调整为多列待显示文本相匹配的宽度；如果待显示文本的长度较短，在文本盒子中显示为单列时，文本盒子的宽度相应自动调整为单列待显示文本相匹配的宽度，相当于文本盒子需要完全包裹待显示文本。

通常还可以对文本盒子设置外边距属性，比如左外边距属性，在实际实现时，左外边距属性可以用margin-left属性来表示，左外边距的具体的数值可以根据需求进行设定，比如可以设定为1px(px是pixel的缩写，是像素单位，1px表示1个像素)或20px等；另外，还可以对文本盒子规定自动换行的处理方法，可以通过使用word-break属性来实现，比如，如果word-break属性的属性值设定为break-all，以待显示文本为横向显示文本为例，表示当待显示文本的一行文本内容到达文本盒子的宽度时，进行强制换行。

步骤S206，如果上述待显示文本的长度超出上述最大显示区域，显示该最大显示区域对应的该待显示文本中的一部分文本。

步骤S208，通过上述省略符盒子，在上述一部分文本的尾部显示预设的省略符。

上述文本显示方法，通过预设的包含有文本盒子和省略符盒子的父级盒子，确定待显示文本的最大显示区域；通过文本盒子，在第一指定区域显示上述待显示文本；如果该待显示文本的长度超出最大显示区域，显示该最大显示区域对应的待显示文本中的一部分文本；通过该省略符盒子，在该一部分文本的尾部显示预设的省略符。该方法通过父级盒子确定的最大显示区域显示多行文本；当待显示文本的长度超出最大显示区域时，通过省略符实现省略显示，因而可以实现多行文本的省略显示；该方式基于css技术即可实现，不受浏览器内核的限制，具有较好的兼容性，同时代码量小，有利于提高网页页面的加载速度。

本发明实施例还提供了另一种文本显示方法，该方法在上述实施例方法的基础上实现；该方法重点描述显示最大显示区域对应的待显示文本中的一部分文本的具体过程，具体对应下述步骤S306。

该方法中，父级盒子预设有溢出隐藏属性；该溢出隐藏属性用于：隐藏超出最大显示区域的文本；在实际实现时，该溢出隐藏属性可以通过将over flow属性的属性值设定为hidden来实现，即可以通过over flow：hidden来表示；通过该溢出隐藏属性，可以对超出最大显示区域的多余的文本进行隐藏。

如图3所示，该方法包括如下步骤：

步骤S302，通过预设的父级盒子确定待显示文本的最大显示区域；其中，父级盒子下属有子级盒子；该子级盒子包括文本盒子和省略符盒子。

步骤S304，通过上述文本盒子显示上述待显示文本。

步骤S306，如果上述待显示文本的长度超出上述最大显示区域，显示该待显示文本中，在该最大显示区域的范围内的一部分文本；隐藏该待显示文本中，除该最大显示区域的范围内的一部分文本以外的文本。

在实际实现时，如果待显示文本的内容较多，导致在最大显示区域内无法完全显示该待显示文本时，考虑到父级盒子预设有溢出隐藏属性，根据该溢出隐藏属性，可以对最大显示区域对应的待显示文本中的一部分文本进行显示，而对超出最大显示区域的另外一部分文本进行隐藏。

步骤S308，通过省略符盒子，在一部分文本的尾部显示预设的省略符。

上述文本显示方法，如果待显示文本的长度超出最大显示区域，显示该待显示文本中，在该最大显示区域的范围内的一部分文本；隐藏该待显示文本中，除该最大显示区域的范围内的一部分文本以外的文本。该方法通过父级盒子确定的最大显示区域显示多行文本；当待显示文本的长度超出最大显示区域时，通过省略符实现省略显示，因而可以实现多行文本的省略显示；该方式基于css技术即可实现，不受浏览器内核的限制，具有较好的兼容性，同时代码量小，有利于提高网页页面的加载速度。

本发明实施例还提供了另一种文本显示方法，该方法在上述实施例方法的基础上实现；该方法重点描述通过省略符盒子，在一部分文本的尾部显示预设的省略符的具体过程，具体对应下述步骤S408。

该方法中，省略符盒子预设有第二浮动属性，该第二浮动属性用于：将该省略符盒子设置在相对于父级盒子的第二指定区域；该第二指定区域与一部分文本的尾部相对应；在实际实现时，该第二浮动属性可以是float属性，该float属性的属性值可以设定为right，即靠右对齐；上述第二指定区域可以理解为根据第二浮动属性中的属性值，所确定的省略符盒子在父级盒子中的相对位置；比如，如果第二浮动属性中的float属性的属性值为right，即float：right，可以理解为将省略符盒子设置在相对于父级盒子内部区域的最右侧；通常该第二指定区域与在最大显示区域的范围内的一部分文本的尾部相对应。

上述省略符盒子还预设有位置属性；该位置属性用于将该省略符盒子设置在该第二指定区域中的指定位置；该指定位置为该一部分文本的尾部；在实际实现时，该位置属性可以包括定位类型属性position和转换属性transform，其中，position属性可以对省略符盒子进行定位；transform属性可以对该省略符盒子进行旋转、缩放、移动或倾斜等，例如，可以设定transform属性的属性值为translate(100％，100％)，表示从省略符盒子的当前位置沿X轴方向，向右移动整个省略符盒子的距离，沿Y轴方向，向下移动整个省略符盒子的距离；在省略符盒子的float属性的属性值为right，position属性的属性值为relative，left：100％，transform属性的属性值为translate(100％，100％)的情况下，如果待显示文本显示为多行，在换行时，float属性的省略符盒子会自动下移，并保持在相对于父级盒子内部区域的最右侧。

由上述可知，通过position：relative，left：100％和transform：translate两个命令，可以将省略符盒子设置在最大显示区域所显示的该一部分文本的尾部，也可以理解为省略符盒子始终保持在父级盒子的右下角。

如图4所示，该方法包括如下步骤：

步骤S402，通过预设的父级盒子确定待显示文本的最大显示区域；其中，父级盒子下属有子级盒子；子级盒子包括文本盒子和省略符盒子。

在实际实现时，父级盒子通常为固定高度，同时还预设有最大高度属性，该最大高度属性可以通过max-height属性来实现，max-height属性的属性值可以根据需求进行设定，例如可以设定为40px，表示父级盒子的显示区域的最大显示高度为40px；另外，父级盒子通常还预设有行高属性，该行高属性可以通过line-height属性来实现，line-height属性的属性值可以根据需求进行设定，例如可以设定为20px，表示父级盒子的显示区域的行间的距离，即行高为20px。

通常情况下，父级盒子下属的子级盒子，还包括空值盒子；该空值盒子预设有第三浮动属性；该第三浮动属性用于：将该空值盒子设置在相对于该父级盒子的第三指定区域；该空值盒子用于：如果待显示文本的长度超出最大显示区域，将该父级盒子的显示区域保持在最大显示区域；如果待显示文本的长度没有超出最大显示区域，将该父级盒子的显示区域保持在与该待显示文本的长度相匹配的显示区域。

在实际实现时，该第三浮动属性可以是float属性，该float属性的属性值通常可以设定为left，即靠左对齐；上述第三指定区域可以理解为根据第三浮动属性中的属性值，所确定的空值盒子在父级盒子中的相对位置；比如，如果第三浮动属性中的float属性的属性值为left，即float：left，可以理解为将空值盒子设置在相对于父级盒子内部区域的最左侧。

在实际实现时，如果文本盒子预设了第一浮动属性，省略符盒子也预设了第二浮动属性，即父级盒子下属的文本盒子和省略符盒子都是浮动盒子时，父级盒子的显示区域会坍塌，而父级盒子的显示区域坍塌会导致出现一些问题，比如，如果对父级盒子设置了CSS背景颜色或CSS背景图片，由于父级盒子的显示区域不能被撑开，可能导致CSS背景颜色或CSS背景图片不能显示；或者，可能导致父级盒子和子级盒子之间设置的css padding、css margin属性的值不能正确表达，特别是上下边的padding和margin不能正确显示等；为了避免出现父级盒子的显示区域坍塌的问题，可以设置空值盒子，通过该空值盒子可以支撑父级盒子的显示区域不坍塌，并与文本相匹配。

比如，如果待显示文本的内容较多，在最大显示区域只能对待显示文本中的一部分文本进行显示时，通过该空值盒子可以将父级盒子的显示区域保持在该最大显示区域；如果待显示文本的内容较少，没有超出最大显示区域，通过该空值盒子可以将父级盒子的显示区域保持在与待显示文本的长度相匹配的显示区域；也可以理解为如果待显示文本内容较少，比如只有一行，通常不需要省略符；如果待显示文本内容较多，在最大显示区域内无法完全显示时，通常需要省略符；父级盒子的显示区域可以随着待显示文本的内容的多少而自适应调整。

另外，还可以对上述空值盒子设置宽度属性和高度属性，比如，宽度属性可以通过width属性来实现，width属性的属性值可以根据需求进行设定，例如可以设定为20px等，空值盒子的宽度即为width属性所设定的属性值的大小；高度属性可以通过height属性来实现，height属性的属性值可以根据需求进行设定，例如可以设定为40px等，空值盒子的高度即为height属性所设定的属性值的大小；考虑到空值盒子需要能将该父级盒子的显示区域保持在最大显示区域，因此，空值盒子的高度通常可以设定为与父级盒子的最大显示高度相同的高度值，比如，如果父级盒子的max-height属性的属性值为40px，则空值盒子的height属性的属性值通常也是40px。

步骤S404，通过文本盒子显示待显示文本。

步骤S406，如果待显示文本的长度超出最大显示区域，显示最大显示区域对应的待显示文本中的一部分文本。

步骤S408，通过上述省略符盒子，将预设的省略符显示在与上述一部分文本的尾部相对应的第二指定区域。

考虑到根据预设的第二浮动属性，将省略符盒子设置在了相对于父级盒子的第二指定区域，并且，该第二指定区域与在最大显示区域的范围内的一部分文本的尾部相对应，当在该省略符盒子中显示预设的省略符时，相当于将预设的省略符显示在与上述一部分文本的尾部相对应的第二指定区域。

在实际实现时，还可以对上述省略符盒子设置宽度属性和高度属性，比如，宽度属性可以通过width属性来实现，width属性的属性值可以根据需求进行设定，例如可以设定为20px等，省略符盒子的宽度即为width属性所设定的属性值的大小；高度属性可以通过height属性来实现，height属性的属性值可以根据需求进行设定，例如可以设定为20px等，省略符盒子的高度即为height属性所设定的属性值的大小。

通常还可以对上述省略符盒子设置背景颜色属性，该背景颜色属性可以通过background-color属性来实现，background-color属性的属性值可以根据需求进行设定，可以接受任意合法的css颜色值，如预定义的颜色名、十六进制数值、RGB(表示Red、Green和Blue三个颜色通道)值等，作为示例，background-color属性的属性值可以设定为十六进制数值表示的#fff等。

上述文本显示方法，如果待显示文本的长度超出最大显示区域，显示最大显示区域对应的待显示文本中的一部分文本，通过省略符盒子，将预设的省略符显示在与该一部分文本的尾部相对应的第二指定区域。该方法通过父级盒子确定的最大显示区域显示多行文本；当待显示文本的长度超出最大显示区域时，通过省略符实现省略显示，因而可以实现多行文本的省略显示；该方式基于css技术即可实现，不受浏览器内核的限制，具有较好的兼容性，同时代码量小，有利于提高网页页面的加载速度。

而且，上述文本显示方法可以只通过css实现，因而代码量少，网页页面的加载速度快；通过采用float布局的方式，可以灵活设置各个子级盒子的相对位置；该方法可以适用于任何前端语言，如react、vue或者angular等，并且不受浏览器版本限制，可以兼容多种版本的浏览器，因而兼容性好；另外，实现上述文本显示方法的逻辑可以封装成类的形式，当需要使用该文本显示逻辑时，直接加载相应的类的名称就可以，不需要使用人员了解该逻辑，从而提高了使用的便利性。

为进一步理解上述实施例，下面提供一种文本显示的结构示意图，如图5所示，其中，A Web Page相当于网页页面，在网页页面中包括外部盒子(相当于上述父级盒子)、左侧盒子(相当于上述空值盒子)、文本盒子和省略号盒子(相当于上述省略符盒子)；其中，左侧盒子位于外部盒子的最左侧，文本盒子位于外部盒子的右侧，省略号盒子位于外部盒子的右下角；图5中，粗实线对应的区域代表外部盒子；细虚线对应的区域代表左侧盒子；细实线对应的区域代表文本盒子；点划线对应的区域代表省略号盒子。

外部盒子用于确定待显示文本的最大显示区域；文本盒子用于显示待显示文本；如果待显示文本的长度超出该最大显示区域，显示该最大显示区域对应的待显示文本中的一部分文本；省略号盒子用于在该一部分文本的尾部显示预设的省略符；左侧盒子用于：如果待显示文本的长度超出最大显示区域，将该外部盒子的显示区域保持在最大显示区域；如果待显示文本的长度没有超出最大显示区域，将该外部盒子的显示区域保持在与该待显示文本的长度相匹配的显示区域。

图5中，外部盒子为固定高度，并预设有溢出隐藏属性，该溢出隐藏属性可以通过命令over flow：hidden来实现，用于隐藏超出最大显示区域的文本；另外，外部盒子还预设有最大高度属性和行高属性，其中，最大高度属性通过命令max-height来实现，行高属性通过命令line-height来实现，图5中，max-height：40px，可以理解为父级盒子的显示区域的最大显示高度为40px；line-height：20px，可以理解为父级盒子的显示区域的行间的距离，即行高为20px。

左侧盒子位于外部盒子的最左侧，是外部盒子的第一部分，左侧盒子的float属性可以使外部盒子具有float属性，相当于可以使外部盒子成为floot盒子；图5中，对左侧盒子设置了三种属性，其中，float：left，可以理解为将左侧盒子设置在相对于外部盒子内部区域的最左侧；width：20px，可以理解为左侧盒子的宽度为20px；height：40px，可以理解为左侧盒子的高度为40px。

图5中，在对文本盒子所设置的属性中，float：right，可以理解为将文本盒子设置在相对于外部盒子内部区域的最右侧；如果待显示文本为横向显示文本，width：100％可以理解为文本盒子的宽度与外部盒子的宽度相同，文本盒子的高度与待显示文本的长度相匹配，即文本盒子的高度随着待显示文本的长度可以自适应调整；如果待显示文本为纵向显示文本，width：100％可以理解为文本盒子的高度与外部盒子的高度相同，文本盒子的宽度与待显示文本的长度相匹配，文本盒子的宽度随着待显示文本的长度可以自适应调整；margin-left：20px，可以理解为文本盒子的左侧距外部盒子的左侧的左外边距为20px；以待显示文本为横向显示文本为例，wordbreak：break-all可以理解为当待显示文本的一行文本内容到达文本盒子的宽度时，进行强制换行。

图5中，对省略号盒子设定的属性中，float：right，可以理解为将省略符盒子设置在相对于父级盒子内部区域的最右侧；width：20px可以理解为省略号盒子的宽度为20px；background-color：#fff，可以理解为省略号盒子设置背景颜色用十六进制表示为#fff；transform：translate(100％，100％)可以理解为省略号盒子的当前位置沿X轴方向，向右移动整个省略号盒子的距离，沿Y轴方向，向下移动整个省略号盒子的距离；通过position：relative，left：100％和transform：translate两个命令，可以将省略号盒子始终保持在外部盒子的右下角。如果待显示文本内容较少，比如只有一行，通常不需要省略号盒子中的省略符；如果待显示文本内容较多，在最大显示区域内无法完全显示时，通常需要省略号盒子中的省略符。

本发明实施例提供了一种文本显示装置的结构示意图，如图6所示，该装置包括：确定模块60，用于通过预设的父级盒子确定待显示文本的最大显示区域；其中，父级盒子下属有子级盒子；子级盒子包括文本盒子和省略符盒子；第一显示模块61，用于通过文本盒子显示待显示文本；第二显示模块62，用于如果待显示文本的长度超出最大显示区域，显示最大显示区域对应的待显示文本中的一部分文本；第三显示模块63，用于通过省略符盒子，在一部分文本的尾部显示预设的省略符。

本发明提供的文本显示装置，首先通过预设的父级盒子确定待显示文本的最大显示区域；该父级盒子下属的子级盒子包括文本盒子和省略符；通过该文本盒子显示待显示文本；如果该待显示文本的长度超出上述最大显示区域，显示该最大显示区域对应的待显示文本中的一部分文本；然后通过该省略符盒子，在该一部分文本的尾部显示预设的省略符。该装置通过父级盒子确定的最大显示区域显示多行文本；当待显示文本的长度超出最大显示区域时，通过省略符实现省略显示，因而可以实现多行文本的省略显示；该方式基于css技术即可实现，不受浏览器内核的限制，具有较好的兼容性，同时代码量小，有利于提高网页页面的加载速度。

进一步的，文本盒子预设有第一浮动属性，第一浮动属性用于：将文本盒子设置在相对于父级盒子的第一指定区域；第一显示模块61还用于：通过文本盒子，在第一指定区域显示待显示文本。

进一步的，如果待显示文本为横向显示文本，文本盒子的宽度与父级盒子的宽度相同；文本盒子的高度与待显示文本的长度相匹配；如果待显示文本为纵向显示文本，文本盒子的高度与父级盒子的高度相同；文本盒子的宽度与待显示文本的长度相匹配。

进一步的，父级盒子预设有溢出隐藏属性；溢出隐藏属性用于：隐藏超出最大显示区域的文本；第二显示模块62还用于：显示待显示文本中，在最大显示区域的范围内的一部分文本；隐藏待显示文本中，除最大显示区域的范围内的一部分文本以外的文本。

进一步的，省略符盒子预设有第二浮动属性，第二浮动属性用于：将省略符盒子设置在相对于父级盒子的第二指定区域；第二指定区域与一部分文本的尾部相对应；第三显示模块63还用于：通过省略符盒子，将预设的省略符显示在与一部分文本的尾部相对应的第二指定区域。

进一步的，省略符盒子还预设有位置属性；位置属性用于将省略符盒子设置在第二指定区域中的指定位置；指定位置为一部分文本的尾部。

进一步的，父级盒子下属的子级盒子，还包括空值盒子；空值盒子预设有第三浮动属性；第三浮动属性用于：将空值盒子设置在相对于父级盒子的第三指定区域；空值盒子用于：如果待显示文本的长度超出最大显示区域，将父级盒子的显示区域保持在最大显示区域；如果待显示文本的长度没有超出最大显示区域，将父级盒子的显示区域保持在与述待显示文本的长度相匹配的显示区域。

本发明实施例所提供的文本显示装置，其实现原理及产生的技术效果和前述文本显示方法实施例相同，为简要描述，文本显示装置实施例部分未提及之处，可参考前述文本显示方法实施例中相应内容。

本发明实施例还提供了一种用户终端，参见图7所示，该用户终端包括处理器130和存储器131，该存储器131存储有能够被处理器130执行的机器可执行指令，该处理器130执行机器可执行指令以实现上述文本显示方法。

进一步地，图7所示的用户终端还包括总线132和通信接口133，处理器130、通信接口133和存储器131通过总线132连接。

其中，存储器131可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口133(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。总线132可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

处理器130可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器130中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器130可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DigitalSignal Processor，简称DSP)、专用集成电路(Application Specific IntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器131，处理器130读取存储器131中的信息，结合其硬件完成前述实施例的方法的步骤。

本发明实施例还提供了一种机器可读存储介质，该机器可读存储介质存储有机器可执行指令，该机器可执行指令在被处理器调用和执行时，该机器可执行指令促使处理器实现上述文本显示方法，具体实现可参见方法实施例，在此不再赘述。

本发明实施例所提供的文本显示方法、装置和用户终端的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (12)

1.一种文本显示方法，其特征在于，所述方法包括：

通过预设的父级盒子确定待显示文本的最大显示区域；其中，所述父级盒子下属有子级盒子；所述子级盒子包括文本盒子和省略符盒子；

通过所述文本盒子显示所述待显示文本；

如果所述待显示文本的长度超出所述最大显示区域，显示所述最大显示区域对应的所述待显示文本中的一部分文本；

通过所述省略符盒子，在所述一部分文本的尾部显示预设的省略符。

2.根据权利要求1所述的方法，其特征在于，所述文本盒子预设有第一浮动属性，所述第一浮动属性用于：将所述文本盒子设置在相对于所述父级盒子的第一指定区域；

所述通过所述文本盒子显示所述待显示文本的步骤，包括：通过所述文本盒子，在所述第一指定区域显示所述待显示文本。

3.根据权利要求2所述的方法，其特征在于，如果所述待显示文本为横向显示文本，所述文本盒子的宽度与所述父级盒子的宽度相同；所述文本盒子的高度与所述待显示文本的长度相匹配；

如果所述待显示文本为纵向显示文本，所述文本盒子的高度与所述父级盒子的高度相同；所述文本盒子的宽度与所述待显示文本的长度相匹配。

4.根据权利要求1所述的方法，其特征在于，所述父级盒子预设有溢出隐藏属性；所述溢出隐藏属性用于：隐藏超出所述最大显示区域的文本；

所述显示所述最大显示区域对应的所述待显示文本中的一部分文本的步骤，包括：显示所述待显示文本中，在所述最大显示区域的范围内的一部分文本；隐藏所述待显示文本中，除所述最大显示区域的范围内的一部分文本以外的文本。

5.根据权利要求1所述的方法，其特征在于，所述省略符盒子预设有第二浮动属性，所述第二浮动属性用于：将所述省略符盒子设置在相对于所述父级盒子的第二指定区域；所述第二指定区域与所述一部分文本的尾部相对应；

所述通过所述省略符盒子，在所述一部分文本的尾部显示预设的省略符的步骤，包括：通过所述省略符盒子，将预设的省略符显示在与所述一部分文本的尾部相对应的所述第二指定区域。

6.根据权利要求5所述的方法，其特征在于，所述省略符盒子还预设有位置属性；所述位置属性用于将所述省略符盒子设置在所述第二指定区域中的指定位置；所述指定位置为所述一部分文本的尾部。

7.根据权利要求1所述的方法，其特征在于，所述父级盒子下属的子级盒子，还包括空值盒子；所述空值盒子预设有第三浮动属性；所述第三浮动属性用于：将所述空值盒子设置在相对于所述父级盒子的第三指定区域；

所述空值盒子用于：如果所述待显示文本的长度超出所述最大显示区域，将所述父级盒子的显示区域保持在所述最大显示区域；如果所述待显示文本的长度没有超出所述最大显示区域，将所述父级盒子的显示区域保持在与所述待显示文本的长度相匹配的显示区域。

8.一种文本显示装置，其特征在于，所述装置包括：

确定模块，用于通过预设的父级盒子确定待显示文本的最大显示区域；其中，所述父级盒子下属有子级盒子；所述子级盒子包括文本盒子和省略符盒子；

第一显示模块，用于通过所述文本盒子显示所述待显示文本；

第二显示模块，用于如果所述待显示文本的长度超出所述最大显示区域，显示所述最大显示区域对应的所述待显示文本中的一部分文本；

第三显示模块，用于通过所述省略符盒子，在所述一部分文本的尾部显示预设的省略符。

9.根据权利要求8所述的装置，其特征在于，所述文本盒子预设有第一浮动属性，所述第一浮动属性用于：将所述文本盒子设置在相对于所述父级盒子的第一指定区域；

所述通过所述文本盒子显示所述待显示文本的步骤，包括：通过所述文本盒子，在所述第一指定区域显示所述待显示文本。

10.根据权利要求9所述的装置，其特征在于，如果所述待显示文本为横向显示文本，所述文本盒子的宽度与所述父级盒子的宽度相同；所述文本盒子的高度与所述待显示文本的长度相匹配；

如果所述待显示文本为纵向显示文本，所述文本盒子的高度与所述父级盒子的高度相同；所述文本盒子的宽度与所述待显示文本的长度相匹配。

11.一种用户终端，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器执行所述机器可执行指令以实现权利要求1-7任一项所述的文本显示方法。

12.一种机器可读存储介质，其特征在于，该机器可读存储介质存储有机器可执行指令，该机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现权利要求1-7任一项所述的文本显示方法。

Images