一种标签显示方法、装置与计算设备制造方法及图纸

本发明专利技术公开了一种标签显示方法、装置与计算设备，涉及网页生成技术领域，目的是为了解决现有的浏览器页面标签显示方法存在视觉效果差和网页性能差的问题。上述方法包括步骤：响应于浏览器窗口发生变化，获取浏览器的原始标签数据；计算标签的父级容器的宽度；根据原始标签数据和父级容器的宽度计算父级容器能够容纳的标签数量；以及根据父级容器能够容纳的标签数量对父级容器能够容纳的标签进行渲染并显示。本发明专利技术既可以不限制标签描述内容的多少，又可以避免不必要的标签遍历及渲染，同时还能够满足根据不同屏幕大小显示合适数量的标签，在满足标签展示需求的前提下，实现了对展示效果和页面性能的双重优化。对展示效果和页面性能的双重优化。对展示效果和页面性能的双重优化。

【技术实现步骤摘要】
一种标签显示方法、装置与计算设备


[0001]本专利技术涉及网页生成
，尤其是一种标签显示方法、装置与计算设备。

技术介绍

[0002]网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页构成的，所以网页的浏览体验是相当重要的，它是一个网站的门面，是给浏览者的第一印象。所以在做网页开发时，应由点到面，确保网页在视觉和操作上的体验效果。在现如今的信息时代，出现了各种通信设备，各种终端浏览器，无疑是对网页代码设计的一个极大考验。网页设计人员不仅需要考虑浏览器与硬件设备的兼容性问题，还需要考虑不同浏览器效果展示适配问题。例如，一篇普通的文章网页，有多个对应的文章标签要求一行展示，超出的标签则不展示。因为各种屏幕大小的浏览器众多，而且标签的字数也不固定，我们无法预先知道不同的浏览器可以容纳多少个标签。对于这种情况，目前常见的解决方案有两种。
[0003]一种是根据普遍可适配度的标签数量，固定可显示的标签数量，例如，人为约定每个标签的最大字数，并根据CSS(Cascading Style Sheets，是一种用来表现本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种标签显示方法，包括步骤：响应于浏览器窗口发生变化，获取浏览器的原始标签数据；计算标签的父级容器的宽度；根据所述原始标签数据和所述父级容器的宽度计算所述父级容器能够容纳的标签数量；以及根据所述父级容器能够容纳的标签数量对所述父级容器能够容纳的标签进行渲染并显示。2.如权利要求1所述的方法，其中，当所述原始标签数据所包含的标签数量为1时，将1作为所述父级容器能够容纳的标签数量。3.如权利要求1或2所述的方法，其中，所述方法还包括步骤：根据所述标签的父级容器的宽度判断所述浏览器窗口的状态，所述状态包括页面首次打开、窗口变大或窗口变小。4.如权利要求1至3中任一项所述的方法，其中，当所述浏览器窗口的状态为页面首次打开时，所述根据所述原始标签数据和所述父级容器的宽度计算所述父级容器能够容纳的标签数量的步骤包括：对所述原始标签数据进行遍历，获取遍历到的每个标签的宽度，并对各标签的宽度进行累加；当累加结果等于父级容器的宽度时停止遍历，并将完成宽度累加的标签的数量作为所述父级容器能够容纳的标签数量；当累加结果超过所述父级容器的宽度时停止遍历，并将完成宽度累加的标签的数量减1后作为所述父级容器能够容纳的标签数量；以及当所述原始标签数据中全部标签的宽度累加结果未超过所述父级容器的宽度时，将所述原始标签数据中全部标签的数量作为所述父级容器能够容纳的标签数量。5.权利要求1至4中任一项所述的方法，其中，当所述浏览器窗口的状态为窗口变大时，所述根据所述原始标签数据和所述父级容器的宽度计算所述父级容器能够容纳的标签数量的步骤包括：判断当前显示的标签数量是否等于所述原始标签数据中已完成宽度累加的标签的数量；若等于，则对所述原始标签数据进行遍历，获取遍历到的每个标签的宽度，并对各标签的宽度进行累加；当累加结果等于父级容器的宽度时停止遍历，并将完成宽度累加的标签的数量作为所述父级容器能够容纳的标签数量；当累加结果超过所述父级容器的宽度时停止遍历，并将完成宽度累加的标签的数量减1后作为所述父级容器能够容纳的标签数量...

【专利技术属性】
技术研发人员：王晔，
申请(专利权)人：北京车智赢科技有限公司，
类型：发明
国别省市：