一种目标字符串的显示方法及相关装置制造方法及图纸

技术编号:19778458 阅读:23 留言:0更新日期:2018-12-15 11:21
本申请公开了一种目标字符串的显示方法,包括:获取目标字符串的字符串宽度,获取目标容器的容器宽度;判断所述字符串宽度是否大于所述容器宽度;若是,则对所述目标字符串添加text‑overflow属性,对所述目标容器添加title属性,并将所述目标字符串填入所述目标容器,以便完成所述目标字符串的显示操作。通过对宽度进行判断从而对字符串的显示方式进行改变,提高字符串的显示效果,使页面显示更加完整,提高用户的使用体验。本申请还公开了一种目标字符串的显示系统、终端以及计算机可读存储介质,具有以上有益效果。

【技术实现步骤摘要】
一种目标字符串的显示方法及相关装置
本申请涉及计算机
,特别涉及一种目标字符串的显示方法、显示系统、终端以及计算机可读存储介质。
技术介绍
在网页技术中,对于字符串等字符内容的显示方式一般是将字符填入规定的容器元素,通过容器就可以将字符串在网页中显示出来。一般的,字符串内容有多有少,而容器的大小也可以是固定值或者是非固定的。当容器的大小为非固定的大小时,无论字符串的长度为多少均可以填入容器中,并显示出来。当容器的大小为固定大小,并且大于等于字符串内容的大小时,字符串也可以正常显示在容器内。但是当容器的固定大小小于字符串内容的大小时,字符串的内容就无法正常显示在容器内,通常表现为内容显示不全等情况,造成用户观看网页时的体验不佳。因此,如何提高网页在显示字符串时的显示效果是本领域技术人员关注的重点问题。
技术实现思路
本申请的目的是提供一种目标字符串的显示方法、显示系统、终端以及计算机可读存储介质,通过对宽度进行判断从而对字符串的显示方式进行改变,提高字符串的显示效果,使页面显示更加完整,提高用户的使用体验。为解决上述技术问题,本申请提供一种目标字符串的显示方法,包括:获取目标字符串的字符串宽度,获取目标容器的容器宽度;判断所述字符串宽度是否大于所述容器宽度;若是,则对所述目标字符串添加text-overflow属性,对所述目标容器添加title属性,并将所述目标字符串填入所述目标容器,以便完成所述目标字符串的显示操作。可选的,获取目标字符串的字符串宽度,包括:将所述目标字符串按照预设属性填入空容器;获取所述空容器的空容器宽度,将所述空容器宽度作为所述字符串宽度。可选的,获取目标字符串的字符串宽度,包括:根据预设属性和所述目标字符串的字符数进行宽度计算,得到所述字符串宽度。可选的,还包括:当所述字符串宽度小于等于所述容器宽度时,删除所述目标容器的title属性。本申请还提供一种目标字符串的显示系统,包括:字符串宽度获取模块,用于获取目标字符串的字符串宽度;容器宽度获取模块,用于获取目标容器的容器宽度;宽度判断模块,用于判断所述字符串宽度是否大于所述容器宽度;字符串显示模块,用于当所述字符串宽度大于容器宽度时,对所述目标字符串添加text-overflow属性,对所述目标容器添加title属性,并将所述目标字符串填入所述目标容器,以便完成所述目标字符串的显示操作。可选的,所述字符串宽度获取模块,包括:空容器获取单元,用于将所述目标字符串按照预设属性填入空容器;字符串宽度获取单元,用于获取所述空容器的空容器宽度,将所述空容器宽度作为所述字符串宽度。可选的,所述字符串宽度获取模块,包括:字符串宽度计算单元,用于根据预设属性和所述目标字符串的字符数进行宽度计算,得到所述字符串宽度。可选的,还包括:属性清除模块,用于当所述字符串宽度小于等于所述容器宽度时,删除所述目标容器的title属性。本申请还提供一种终端,包括:存储器,用于存储计算机程序;处理器,用于执行所述计算机程序时实现如上所述的显示方法的步骤。本申请还提供一种计算机可读存储介质,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如上所述的显示方法的步骤。本申请所提供的一种目标字符串的显示方法,包括:获取目标字符串的字符串宽度,获取目标容器的容器宽度;判断所述字符串宽度是否大于所述容器宽度;若是,则对所述目标字符串添加text-overflow属性,对所述目标容器添加title属性,并将所述目标字符串填入所述目标容器,以便完成所述目标字符串的显示操作。通过对获取到的字符串宽度和容器宽度进行判断,当字符串宽度大于容器宽度时,对字符串添加text-overflow属性实现字符串的截断处理,对目标容器添加title属性实现对字符串内容的悬浮窗显示,也就是对超出容器宽度的字符串实现整体的显示,对没有超出宽度的字符串任何操作,使页面内容更加完整,不影响用户的对网页内容的阅读,同时提高用户体验。本申请还提供一种目标字符串的显示系统、终端以及计算机可读存储介质,具有以上有益效果,在此不做赘述。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据提供的附图获得其他的附图。图1为本申请实施例所提供的一种目标字符串的显示方法的流程图;图2为本申请实施例所提供的另一种目标字符串的显示方法的流程图;图3为本申请实施例所提供的一种目标字符串的显示系统的结构示意图。具体实施方式本申请的核心是提供一种目标字符串的显示方法、显示系统、终端以及计算机可读存储介质,通过对宽度进行判断从而对字符串的显示方式进行改变,提高字符串的显示效果,使页面显示更加完整,提高用户的使用体验。为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。在网页显示字符串过程中,经常会出现字符串宽度超出容器宽度的情况,影响显示效果。一种现有技术,通过对字符串添加text-overflow属性,实现对超出单元格宽度的字符串进行截断处理,使字符串不会超出单元格,但是会导致字符串展示信息不全的情况。另一种现有技术,对每个单元格添加title属性,实现当鼠标移动至容器上时会将内容以悬浮窗的形式展示出来,但是会导致宽度未超容器宽度的字符串也会显示在悬浮窗中,导致悬浮窗过多,影响页面美观。还一种现有技术中,不固定容器的行高,对于过长的字符串进行换行显示,但是会导致其他固定格式的控件不美观的情况。因此,本申请实施例提供一种目标字符串的显示方法,通过对获取到的字符串宽度和容器宽度进行判断,当字符串宽度大于容器宽度时,对字符串添加text-overflow属性实现字符串的截断处理,对目标容器添加title属性实现对字符串内容的悬浮窗显示,也就是对超出容器宽度的字符串实现整体的显示,对没有超出宽度的字符串任何操作,使页面内容更加完整,不影响用户的对网页内容的阅读,同时提高用户体验。具体的,请参考图1,图1为本申请实施例所提供的一种目标字符串的显示方法的流程图。该方法可以包括:S101,获取目标字符串的字符串宽度,获取目标容器的容器宽度;由于本申请实施例需要对字符串的宽度和容器的宽度进行比较,因此本步骤首先获取目标字符串的字符串宽度和目标容器的容器宽度。其中,字符串宽度可以根据网页编程中提供的方法直接获取,也可以根据字符串的属性和字符串的具体内容进行计算得到字符串宽度,还可以将目标字符串填入到不固定宽度的容器中,将容器的宽度作为字符串宽度进行获取。因此,步骤中不限定字符串宽度的获取方法,可以根据实际情况选择合适的方法。可选的,本步骤中获取目标字符串的字符串宽度,可以包括:将目标字符串按照预设属性填入空容器;获取空容器的空容器宽度,将空容器宽度作为字符串宽度。其中,空容器即为宽本文档来自技高网...

【技术保护点】
1.一种目标字符串的显示方法,其特征在于,包括:获取目标字符串的字符串宽度,获取目标容器的容器宽度;判断所述字符串宽度是否大于所述容器宽度;若是,则对所述目标字符串添加text‑overflow属性,对所述目标容器添加title属性,并将所述目标字符串填入所述目标容器,以便完成所述目标字符串的显示操作。

【技术特征摘要】
1.一种目标字符串的显示方法,其特征在于,包括:获取目标字符串的字符串宽度,获取目标容器的容器宽度;判断所述字符串宽度是否大于所述容器宽度;若是,则对所述目标字符串添加text-overflow属性,对所述目标容器添加title属性,并将所述目标字符串填入所述目标容器,以便完成所述目标字符串的显示操作。2.根据权利要求1所述的显示方法,其特征在于,获取目标字符串的字符串宽度,包括:将所述目标字符串按照预设属性填入空容器;获取所述空容器的空容器宽度,将所述空容器宽度作为所述字符串宽度。3.根据权利要求1所述的显示方法,其特征在于,获取目标字符串的字符串宽度,包括:根据预设属性和所述目标字符串的字符数进行宽度计算,得到所述字符串宽度。4.根据权利要求1至3任一项所述的显示方法,其特征在于,还包括:当所述字符串宽度小于等于所述容器宽度时,删除所述目标容器的title属性。5.一种目标字符串的显示系统,其特征在于,包括:字符串宽度获取模块,用于获取目标字符串的字符串宽度;容器宽度获取模块,用于获取目标容器的容器宽度;宽度判断模块,用于判断所述字符串宽度是否大于所述容器宽度;字符串显示模块,用于当所述字符串宽度大...

【专利技术属性】
技术研发人员:孙凤超
申请(专利权)人:郑州云海信息技术有限公司
类型:发明
国别省市:河南,41

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1