CN111309324A

CN111309324A - Web端内容自适应显示的方法、存储介质

Info

Publication number: CN111309324A
Application number: CN202010064605.2A
Authority: CN
Inventors: 刘德建; 陈铭; 陈耀灿; 郭玉湖; 陈宏�
Original assignee: Fujian Tianquan Educational Technology Ltd
Current assignee: Fujian Tianquan Educational Technology Ltd
Priority date: 2020-01-20
Filing date: 2020-01-20
Publication date: 2020-06-19

Abstract

本发明提供web端内容自适应显示的方法、存储介质，方法包括：创建一css类，内容包括与浏览器分辨率相对应的默认显示宽度和默认显示高度，以及超出部分自动换行和超出部分隐藏；添加所述css类和待显示内容至与浏览器分辨率相对应的一容器；判断容器的浏览器元素可视区域高度和浏览器元素内容总高度两个属性的值是否相等，若是，则待显示内容未超出一行；若否，则待显示内容超出一行。本发明能够对应不同分辨率动态判断显示内容是否超过一行，既实现了自动适配用户屏幕宽度，而且无需开发者额外编码，大大降低实现复杂度和成本；还具备提示当前显示状态的功能以及灵活自选显示或隐藏超出内容的功能，为用户提供更好地观看体验和操作体验。

Description

Web端内容自适应显示的方法、存储介质

技术领域

本发明涉及web端内容显示领域，具体涉及web端内容自适应显示的方法、存储介质。

背景技术

所有的web环境(包括pc和h5)，都有浏览器内容超出一行自动隐藏的需求。例如图1所示的界面示意图，当某个搜索条件一行显示不下时，就出现“更多”按钮，用户点击“更多”后，会将剩余被隐藏的条件全部显示出来。

关于判断“内容是否超过一行”，目前主要有以下几种实现方式：

1、固定每行显示的数量，如果总数量超过这个限定数量，就表示有更多内容。例如限定一行就显示3个搜索条件，如果总数有5个，就表示一样显示不下，交互上表现为显示3个，隐藏两个。

这种方法的优点是实现简单；缺点是无法适应动态分辨率，比如有些宽屏用户，如果一行只显示3个搜索条件，那么会留下大量的空白区域，体验不好。

2、通过动态计算要显示内容的总宽度，然后截取出屏幕可以显示的内容，将无法显示的内容进行隐藏。

这种方法的优点是可以动态适应多种分辨率；缺点是通过代码计算，实现复杂，因为不同语种，不同字体的宽度都不一样，通过程序动态计算的难度较大。

因此，有必要提供一种能融合上述优点，同时避免其缺点的web端内容自适应显示方案。

发明内容

本发明所要解决的技术问题是：提供涉及web端内容自适应显示的方法、存储介质，在判断显示内容是否超过一行时既能实现自动适配用户屏幕宽度，而且易于实现，复杂度低。

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

web端内容自适应显示的方法，包括

创建一css类，所述css类的内容包括与浏览器分辨率相对应的默认显示宽度和默认显示高度，以及超出部分自动换行和超出部分隐藏；

添加所述css类和待显示内容至与浏览器分辨率相对应的一容器；

判断容器的浏览器元素可视区域高度和浏览器元素内容总高度两个属性的值是否相等，若是，则待显示内容未超出一行；若否，则待显示内容超出一行。

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

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行后，能够实现上述web端内容自适应显示的方法所包含的步骤。

本发明的有益效果在于：由于在浏览器的容器中设置了与浏览器分辨率相对应的默认显示宽度和默认显示高度，并同时设置超出自动换行和超出隐藏。因此，若待显示内容不足一行，则不会触发换行，则浏览器元素内容总高度和浏览器元素可视区域高度(一行的高度)相等；反之，若待显示内容超出一行，由于超出部分将自动换行且被隐藏，则浏览器元素可视区域高度将小于浏览器元素内容总高度。因此，本申请基于css自动计算高度的能力，以及css为浏览器原生支持的能力，无需开发者额外编码的特点，即实现了动态适应分辨率，又大大降低了实现复杂度和成本。因此具备很强的实用性。

附图说明

图1为本发明实施例一种web端内容自适应显示的方法的流程示意图；

图2为本发明实施例一一种web端内容自适应显示的方法的流程示意图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：利用CSS自动计算高度的能力判断容器属性值即可实现了确定是否超行，不仅能动态适应多种分辨率，而且基于浏览器原生支持的CSS特性，省去额外编码的工作，从而大大降低了实现难度。

本发明涉及的技术术语解释:

请参照图1，本发明提供web端内容自适应显示的方法，包括：

请参阅图2，进一步地，还包括：

若待显示内容超出一行，则在文末显示预设第一内容的按键。

由上述描述可知，由于超行自动隐藏，因此所述按键的配置可用于提示用户当前行的内容超出可显示范围，避免用户忽略隐藏内容。

进一步地，还包括：

当所述预设第一内容的按键被点击后，在所述容器的css类中追加显示隐藏内容的设置；

同时，修改所述第一内容为第二内容。

由上述描述可知，通过设置所述按键，提供自选显示隐藏内容的功能；通过修改按键内容，用于提示用户超行内容的当前显示状态。

进一步地，还包括：

当所述第二内容的按键被点击后，删除所述追加的设置；

同时，修改所述第二内容为第一内容。

由上述描述可知，按键设置，不仅具备明显地提示作用；而且实现自定义超行内容的显示方式，还能能优化界面显示效果。

进一步地，所述第一内容为更多；第二内容为隐藏。

由上述描述可知，简短又直白的文字提示内容能起到有效的提示作用。

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

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行后，能够实现下述web端内容自适应显示的方法所包含的步骤：

进一步地，还包括：

同时，修改所述第一内容为第二内容。

进一步地，还包括：

当所述第二内容的按键被点击后，删除所述追加的设置；

同时，修改所述第二内容为第一内容。

进一步地，所述第一内容为更多；第二内容为隐藏。

从上述描述可知，对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。所述流程执行后，同样能够获取各方法对应的有益效果。

其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

实施例一

请参照图2，本实施例提供web端内容自适应显示的方法，具体用于判断内容是否超过一行，所述方法包括：

S1：创建一css类，所述css类中设置包含以下内容：

A、设置默认显示宽度(浏览器中一行里用来显示内容的最大宽度)；

例如设置以浏览器可视区域的90％作为内容显示，则对应的默认显示宽度为90％，代码为：width:“90％”。

B、设置默认显示高度(显示单行内容所需要的高度)；

通常这个高度是当前页面字体的大小，例如当前页面显示的是21号字体，那么设置默认显示高度为21；代码为：height:21px；

C、设置超出部分自动换行；

固定代码：word-wrap:break-word，目的是告诉浏览器，当显示的内容超出“A”设定的宽度时，自动换行显示。

D、设置超出部分隐藏；

固定代码：overflow:hidden。这句话告诉浏览器，如果要显示的内容超过一行，那么将除了第一行以外的内容隐藏起来。

S2：创建一个Div作为容器，在本实施例中暂时取名demoAutoWrap；

如浏览器的分辨率为1000px，可以设定容器的宽度为1000像素。通过所述容器模拟宽度为1000px的浏览器。容器不一定和浏览器分辨率相等，容器可以根据业务需求随意指定，比如浏览器宽度是1000px，容器可以设置为800px。

S3：添加上述创建的css类和待显示内容到容器demoAutoWrap中；

HTMl中div只是一个容器，要想将容器中的内容显示出来，需要给容器添加css，这里添加一个上面已经建好的css后，div内的内容就按照步骤S1中a-d设置的进行显示。

在此，通过容器模拟相应分辨率的浏览器，同时结合上述css样式中A和B的设置，即可实现依据当前浏览器分辨率，自动确定与其相对应的单行最大宽度和最大高度。由此，实现了单行宽高动态地适应浏览器不同分辨率。

S4：判断容器的浏览器元素可视区域高度clientHeight和浏览器元素内容总高度scrollHeight这两个属性的值是否相等；

若相等，则说明待显示内容没有超出一行，

若不相等，则待显示内容超出一行。

这是因为，在浏览器的容器中通过样式css设置了超出自动换行和超出隐藏。因此，若待显示内容不足一行，则不会触发换行，则浏览器元素内容总高度和浏览器元素可视区域高度(一行的高度)相等；反之，若待显示内容超出一行，由于超出部分将自动换行且被隐藏，则浏览器元素可视区域高度将小于浏览器元素内容总高度。

比如，上述css类添加到容器后，得到对应A设置的宽度是100像素(容器对应分辨率与A的设置计算得到)；而待显示内容需200像素的宽度才能全部显示，则将触发换行。这是因为：由于通过A的设置，得到的对应宽度为100像素，则上述s4中获取的clientHeight＝21；scrollHeight＝42；则两个属性值不相等，得到待显示内容超出一行的结果。高度同理。

实施例二

请参照图2，本实施例在实施例一的基础上，对其做进一步扩展，以优化页面的显示效果，同时方便用户观看和操作。

本实施例的方法在实施例一的方法基础上，增加以下步骤：

S5：若待显示内容超出一行，则在文末显示预设第一内容的按键。

所述按键用于提示用户该行存在超出并隐藏的内容。所述第一内容可自定义，如“更多”，“还有更多”、“展开”等。

S6：监听用户点击第一内容按键的事件，当所述预设第一内容的按键被点击后，在所述容器的css类中追加显示隐藏内容的设置；同时，修改所述第一内容为第二内容。

追加的设置为：overflow：auto，目的在于告诉游览器将所隐藏的内容显示出来。通过对应第一内容的按键，能够赋予用户通过点击观看隐藏内容的功能；而显示隐藏内容后，将及时更新按键内容，以提示用户当前的显示状态。

S7：当所述第二内容的按键被点击后，删除上述追加的设置；同时，修改所述第二内容为第一内容。

删除后，超行内容又会被隐藏。通过对应第二内容的按键，能够赋予用户通过点击隐藏超行内容的功能，以获取更大可视区域，方便观看其他内容，即能够优化界面显示。

所述第二内容可以是“隐藏”、“收藏”、“收起”等。

实施例三

本实施例对应实施例二，提供一具体运用实例：

需求为要在浏览器宽度10％的宽度范围(通过css类的A设置)内显示“一二三四五六七八九十”(待显示内容)，假设待显示内容所需像素为200px。如果超出10％范围，则显示“还有更多”，否则显示“没有了”。示例代码如下：

Demo1

假设当前浏览器宽度为1000像素，10％就是100像素。相应的，即css中设置的“默认显示宽度”为10％；容器的分辨率为1000像素；容器添加css类和待显示内容后，这100像素可以显示的内容为“一二三四五六”，则“七八九十”将换行并隐藏。Ps：每个字的显示宽度和字体还有字号有关。

此时，容器中浏览器元素可视区域高度clientHeight为21；浏览器元素内容总高度scrollHeight为42(因为两行就可以显示全部了，所以是1行高度*2)；

由于scrollHeight大于clientHeight，判断内容超出一行，显示“还有更多”。

Demo2

假设当前浏览器宽度为2000像素，10％像素就是200像素。相应的，即css中设置的“默认显示宽度”为10％，容器的分辨率为2000像素，容器添加css类和待显示内容后，得到的200像素单行可显示区域可以显示的内容为：“一二三四五六七八九十”。ps每个字的显示宽度和字体还有字号有关。

此时，容器中浏览器元素可视区域高度clientHeight为21，浏览器元素内容总高度scrollHeight为21(因为一行就可以显示全部了，所以是1行高度)；

由于scrollHeight等于clientHeight，判断此时内容未超出一行，显示“没有了”。

实施例四

本发明针对实施例一至实施例三，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行后，能够实现上述实施例一至实施例三任意一个实施例所述的web端内容自适应显示的方法所包含的步骤。具体步骤内容在此不进行复述，详细请参阅实施例一至实施例三的记载。

综上所述，本发明提供的本发明web端内容自适应显示的方法、存储介质，能够对应不同分辨率动态判断显示内容是否超过一行，既实现了自动适配用户屏幕宽度，而且无需开发者额外编码，大大降低实现复杂度和成本；进一步地，本发明还具备显著的提示当前显示状态的功能以及灵活自选显示或隐藏超出内容的功能，为用户提供更好地观看体验和操作体验，因此，实用性高。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.web端内容自适应显示的方法，其特征在于，包括：

2.如权利要求1所述的web端内容自适应显示的方法，其特征在于，还包括：

3.如权利要求2所述的web端内容自适应显示的方法，其特征在于，还包括：

同时，修改所述第一内容为第二内容。

4.如权利要求3所述的web端内容自适应显示的方法，其特征在于，还包括：

当所述第二内容的按键被点击后，删除所述追加的设置；

同时，修改所述第二内容为第一内容。

5.如权利要求4所述的web端内容自适应显示的方法，其特征在于，所述第一内容为更多；第二内容为隐藏。

6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行后，能够实现上述权利要求1-5任意一项所述的web端内容自适应显示的方法所包含的步骤。