[发明专利]长文本文件名的显示方法、存储介质

说明书

本发明提供一种长文本文件名的显示方法，存储介质，方法包括：创建根节点容器的子容器A、子容器B以及子容器C；预设各子容器的文本分配规则，其中，子容器A存放完整文本字段，子容器C存放所述完整文本字段由末尾向前选取的预设宽度的字段，子容器B存放依据所述根节点容器的宽度减去子容器C的宽度以及省略号的宽度后所剩余的文本空间而由所述完整文本字段开头向后选取的字段；当子容器A的宽度超过根节点容器的宽度时，显示顺序并排的子容器B、省略号和子容器C。提高了辨识度，且具备自适应布局展示能力，优化了用户体验；并且，还具有算法轻量、复用性高、灵活度高以及浏览器兼容性等优点。

技术领域

本发明涉及领域Web前端显示效果领域，具体涉及长文本文件名的显示方法、存储介质。

背景技术

目前在Web前端(包括PC端和H5移动端)网页类型的页面显示中，对于超出父容器宽度的长文本的显示方法是在文本末尾显示省略号，效果如图1所示。

这种方式存在一个缺点，即当两段以上文本的内容非常相近，特别是前端内容一样，只有末尾内容，如几个日期与序号时间戳不一样的时候，文本末尾显示省略号，将无法直观的看出两个文本的区别，这将严重影响用户的感知体验。

现有技术中，还提供有在长文本的中间插入省略号的技术方案，具体参见https://blog.csdn.net/baidu_38027860/article/details/81035157以及https://www.jianshu.com/p/e6755f38fe55；前者公开的是通过容器中字符串截取并插入省略号的方法，而后者提供的只是简单的进行字符串的截取拼接，配合超出固定数值200px的宽度出现省略号，这样就导致这个技术方案只适合文本长度大于200以上的文本，而在文本短的时候，比如文本为“我希望你过得比我好”甚至更短的时候，将会出现如“我希望你过得…过得比我好”的显示效果，产生错误的页面展示和文本排版。另外，现有技术中还提供有在CSS中添加省略号的技术方案，具体参见https://oomake.com/question/5056205，然而，其只是实现了多行在末尾添加省略号的方法，并且其不兼容IE10以上版本浏览器和火狐浏览器等主流浏览器。

因此，有必要提供一种在中间添加省略号和显示文末内容以提高辨识度，同时又能实现文本整体自适应性展示，保证所展示文本内容正确性的技术方案。

发明内容

本发明所要解决的技术问题是：提供一种长文本文件名的显示方法、存储介质，不仅能提高辨识度，而且保证显示的正确性，从而优化用户体验。

为了解决上述技术问题，本发明采用的技术方案为：

一种长文本文件名的显示方法，包括：

创建根节点容器的子容器A、子容器B以及子容器C；

预设各子容器的文本分配规则，其中，子容器A存放完整文本字段，子容器C存放所述完整文本字段由末尾向前选取的预设宽度的字段，子容器B存放依据所述根节点容器的宽度减去子容器C的宽度以及省略号的宽度后所剩余的文本空间而由所述完整文本字段开头向后选取的字段；

当子容器A的宽度超过根节点容器的宽度时，显示顺序并排的子容器B、省略号和子容器C。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行后，能够实现上述一种长文本文件名的显示方法所包含的步骤。