CN111158839A - 段落内容展示方法及装置 - Google Patents

Abstract

本发明提供了一种段落内容展示方法及装置，该方法包括：获取目标元素的展示样式数据，根据展示样式数据创建虚拟元素；目标元素具有固定的显示高度；将段落内容填充至虚拟元素中，以根据虚拟元素生成段落内容的高度；删除虚拟元素；若段落内容的高度不大于显示高度；将段落内容发送至目标元素，以使目标元素展示段落内容。本发明实施例通过虚拟元素实现对目标元素显示效果的预判断，控制对动态段落内容的展示，从而保证目标元素显示的段落内容的完整性。

Description

段落内容展示方法及装置

技术领域

本发明涉及数据处理技术领域，尤其是涉及一种段落内容展示方法及装置。

背景技术

一般在页面中元素的显示是有高度限制的，但展示在该元素内的段落内容是动态的，有可能超出这个高度的限制，也可能没有超出这个高度的限制。若将段落内容直接发送至元素进行显示，可能出现段落内容不能完全显示的问题，导致段落内容阅读者仅获取到段落内容的部分信息。

发明内容

本发明提供了一种段落内容展示方法及装置，可以通过判断段落内容是否超出元素的固定高度，控制对段落内容的展示，以保证段落内容展示的完整性。

第一方面，本发明实施例提供了一种段落内容展示方法，该方法包括：获取目标元素的展示样式数据，根据所述展示样式数据创建虚拟元素；所述目标元素具有固定的显示高度；将所述段落内容填充至所述虚拟元素中，以根据所述虚拟元素生成所述段落内容的高度；删除所述虚拟元素；若所述段落内容的高度不大于所述显示高度；将所述段落内容发送至所述目标元素，以使所述目标元素展示所述段落内容。

第二方面，本发明实施例还提供一种段落内容展示装置，该装置包括：创建模块，用于获取目标元素的展示样式数据；根据所述展示样式数据创建虚拟元素；所述目标元素具有固定的显示高度；计算模块，用于将所述段落内容填充至所述虚拟元素中，以根据所述虚拟元素生成所述段落内容的高度；清理模块，用于删除所述虚拟元素；发送模块，用于若所述段落内容的高度不大于所述显示高度；将所述段落内容发送至所述目标元素，以使所述目标元素展示所述段落内容。

第三方面，本发明实施例还提供一种计算机设备，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述段落内容展示方法。

第四方面，本发明实施例还提供一种具有处理器可执行的非易失的程序代码的计算机可读介质，所述程序代码使所述处理器执行上述段落内容展示方法。

本发明实施例带来了以下有益效果：本发明实施例提供了一种段落内容展示方案，该方案通过获取目标元素的展示样式数据，创建与目标元素的展示样式相同的虚拟元素，由于目标元素的显示高度固定，而该虚拟元素的高度不固定，可以按照相同展示样式展示段落内容，因此将段落内容填充至虚拟元素中，可以根据虚拟元素的高度生成段落内容的高度，之后，清除虚拟元素，若段落内容的高度不大于显示高度，将段落内容发送至目标元素，以使目标元素展示段落内容。本发明实施例通过虚拟元素实现对目标元素显示效果的预判断，控制对动态段落内容的展示，从而保证目标元素显示的段落内容的完整性。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

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

图1为本发明实施例提供的段落内容展示方法流程图；

图2为本发明实施例提供的段落内容展示方法实施流程示意图；

图3为本发明实施例提供的一种段落内容展示装置结构框图；

图4为本发明实施例提供的另一种段落内容展示装置结构框图；

图5为本发明实施例提供的计算机设备结构框图。

具体实施方式

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

假设，某元素在页面的显示中高度固定。但是段落的内容是动态的，可能超出固定的高度。而现有的CSS(Cascading Style Sheets，层叠样式表)方法只能对单一行超出内容进行省略。现有方案利用原有的CSS属性，具体实现可以包括如下步骤：

单行溢出：overflow:hidden；

text-overflow:ellipsis；

white-space:nowrap；

n行溢出：display:-webkit-box；

-webkit-box-orient:wertical；

-webkit-line-clamp:n；

overflow:hidden；

现有的技术中使用css有局限性，要么只支持一行段落的省略，要么支持多行(多行省略可以使用webkit的专有属性，然而这种方式的兼容性较差，不适用需要支持多浏览器多版本的web页面)，但不适用多浏览器的各个版本。

基于此，本发明实施例提供的一种段落内容展示方法及装置，可以在页面DOM(Document Object Model，文档对象模型)渲染之前，通过JS(JavaScript)进行计算段落内容实际高度，判断是否超出元素固定高度，后续再根据判定的结果对待展示的内容进行处理。该方案可以适用于多个浏览器的多种版本。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种段落内容展示方法进行详细介绍。

本发明实施例提供了一种段落内容展示方法，参见图1所示的一种段落内容展示方法流程图，该方法包括以下步骤：

步骤S102，获取目标元素的展示样式数据，根据展示样式数据创建虚拟元素。

在本发明实施例中，目标元素是指挂载在body元素下的用于显示段落内容的html元素，通过目标元素可以将段落内容在页面进行展示。展示样式数据用于确定在目标元素中显示段落内容时的段落内容数据样式，包括段落内容中数据的字体类型数据、字体大小数据等可以影响段落内容数据展示大小的数据。根据展示样式数据创建虚拟元素，该虚拟元素是与该目标元素挂载在同一body元素下的html元素。目标元素用于最终显示段落内容，拥有固定的显示高度，而虚拟元素用于中间的计算过程，其显示高度不固定，可以随段落内容的长短变动。

步骤S104，将段落内容填充至虚拟元素中，以根据虚拟元素生成段落内容的高度。

在本发明实施例中，将段落内容填充至虚拟元素中，虚拟元素可以完整的按照与目标元素相同的样式完整显示段落内容，并且虚拟元素的高度可以随段落内容的高度变动。获取虚拟元素的高度，将该虚拟元素的高度作为段落内容的高度。

步骤S106，删除虚拟元素。

在本发明实施例中，由于虚拟元素的内容并不需要展示在页面，只是为了计算段落内容在目标元素展示区域的实际高度而创建的，因此，在计算完成之后需要删除。

步骤S108，若段落内容的高度不大于显示高度；将段落内容发送至目标元素，以使目标元素展示段落内容。

在本发明实施例中，在计算得到了段落内容的高度之后，将段落内容的高度与目标元素的显示高度进行对比，若段落内容的高度不大于显示高度；将段落内容发送至目标元素，以使目标元素展示段落内容，保证目标元素显示段落内容的完整性，从而防止页面阅读者获取到不完整的段落内容信息。

本发明实施例提供了一种段落内容展示方案，该方案通过获取目标元素的展示样式数据，创建与目标元素的展示样式相同的虚拟元素，由于目标元素的显示高度固定，而该虚拟元素的高度不固定，可以按照相同展示样式展示段落内容，因此将段落内容填充至虚拟元素中，可以根据虚拟元素的高度生成段落内容的高度，之后，清除虚拟元素，若段落内容的高度不大于显示高度，将段落内容发送至目标元素，以使目标元素显示段落内容。本发明实施例通过虚拟元素实现对目标元素显示效果的预判断，控制对动态段落内容的展示，从而保证目标元素展示的段落内容的完整性。

考虑到为了便于段落内容进行处理，根据展示样式数据创建虚拟元素，可以按照如下步骤执行：

利用JS代码根据展示样式数据创建虚拟元素。

在本发明实施例中，利用JS代码创建DOM元素，将该DOM元素挂载到body元素上，根据展示样式数据设置该DOM元素的样式，从而该虚拟元素与目标元素的展示样式一致。

需要说明的是，body元素是已有DOM树的根节点，需要将新创建的DOM挂载在上面，才能计算高度。

考虑到段落内容为动态的，段落内容的高度可能超过目标元素的固定的显示高度，因此，该方法还可以包括如下步骤：

若段落内容的高度大于显示高度，根据省略规则对段落内容进行省略处理；将省略处理后的段落内容发送至目标元素，以使目标元素展示省略处理后的段落内容。

在本发明实施例中，省略规则可以预先根据实际需求进行设置，本发明实施例对此不作具体限定。若段落内容的高度大于显示高度，根据省略规则对段落内容进行处理，例如，处理后的段落内容可以显示段落内容的关键数据，对部分数据进行替换或隐藏等，以保证段落内容显示的完整性。

需要说明的是，若在段落内容的高度大于显示高度的情况下，直接用目标元素显示段落内容，会造成部分段落内容无法显示，影响段落内容展示的完整性，本发明实施例通过省略处理，使目标元素显示省略处理后的段落内容，在显示的时候，可以提醒网页浏览者省略处理后的段落内容中存在未显示数据，从而便于网页浏览者进一步获取段落数据，进而保证段落内容显示的完整性。

为了便于提醒网页浏览者进一步获取段落内容信息，根据省略规则对段落内容进行省略处理，可以按照如下步骤执行：

向段落内容中添加省略提醒信息。

在本发明实施例中，可以想段落内容的起始部分，中间部分或者末尾部分添加省略提醒信息，例如，省略提醒信息可以是省略号，将段落内容的部分内容用省略号替代，以减少段落内容对显示区域的占用，并实现对网页浏览者的提醒，比如：超过展示区域需要使用“…”进行省略，鼠标放上去后可以展示全部内容。

考虑到有些页面宽度会随着浏览器窗口变化而变化，导致段落内容的高度不再适用变化后的目标元素，该方法还可以包括如下步骤：

监听目标元素的宽度；若宽度变化，则重新根据虚拟元素生成段落内容的高度。

在本发明实施例中，可以利用JS创建监听器，根据监听器监听目标元素的宽度，当目标元素的宽度变化时，段落内容在目标元素中的展示高度也会变化，即展示样式数据会变化，因此，需要重新根据展示样式数据创建虚拟元素，再根据虚拟元素生成段落内容的实际高度，从而持续保证目标元素对段落内容展示的完整性。

需要说明的是，在页面关闭时，清除监听。

下面以一个具体实施例对本方案计算段落内容实际高度的过程进行说明：

1、JS代码中创建DOM元素；

2、将该DOM元素挂载到body元素上；

3、设置该DOM元素的样式，样式与所要展示的区域样式一致；

4、将内容填充到该DOM元素中；

5、获取该DOM元素的实际高度；

6、将该DOM元素在body元素中删除。

下面以一个具体实施例对本案实时监控过程进行说明：

1、JS创建监听器；

2、监听元素宽度的变化；

3、如果宽度变化，则调用判断是否超出元素固定高度模块；

4、页面关闭时清除监听。

实时监控模块，用于监控元素的宽度变化，当元素的宽度变化时，调用判断是否超出元素固定高度模块，重新判断段落内容是否超出元素固定高度。

其中，判断是否超出元素固定高度模块用于判断段落内容是否超出元素固定高度，该判断过程，需要依赖计算段落内容实际高度模块获取段落内容实际高度。

本发明实施例提供了一种段落内容展示方法及装置，参见图2所示的段落内容展示方法实施流程示意图，该方法可以通过JS创建虚拟元素，利用创建的虚拟元素判断将在元素显示的段落内容是否超出预期，再根据JS返回的数据渲染。当页面元素固定高度却要展示不同长短段落内容时，可以使用本发明进行判断段落内容是否超过页面元素的高度，之后再进行相应的处理，可以支持任意行元素，并且，该方法在多个浏览器的各种版本中都可以使用。

本发明实施例还提供一种段落内容展示装置，参见图3所示的一种段落内容展示装置结构框图，该装置包括：

创建模块71，用于获取目标元素的展示样式数据；根据展示样式数据创建虚拟元素；目标元素具有固定的显示高度；计算模块72，用于将段落内容填充至虚拟元素中，以根据虚拟元素生成段落内容的高度；清理模块73，用于删除虚拟元素；发送模块74，用于若段落内容的高度不大于显示高度；将段落内容发送至目标元素，以使目标元素展示段落内容。

在一个实施例中，创建模块，具体用于：利用JS代码根据展示样式数据创建虚拟元素。

在一个实施例中，发送模块，还用于：若段落内容的高度大于显示高度，根据省略规则对段落内容进行省略处理；将省略处理后的段落内容发送至目标元素，以使目标元素展示省略处理后的段落内容。

在一个实施例中，发送模块，还用于：向段落内容中添加省略提醒信息。

在一个实施例中，参见图4所示的另一种段落内容展示装置结构框图，该装置还包括监控模块75，用于：监听目标元素的宽度；若宽度变化，则重新根据虚拟元素生成段落内容的高度。

本发明实施例还提供一种计算机设备，参见图5所示的计算机设备结构示意框图，该计算机设备包括存储器81、处理器82，存储器中存储有可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述任一种方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的计算机设备的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述

本发明实施例还提供一种具有处理器可执行的非易失的程序代码的计算机可读介质，程序代码使处理器执行上述任一种方法的步骤。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (11)

1.一种段落内容展示方法，其特征在于，包括：

获取目标元素的展示样式数据，根据所述展示样式数据创建虚拟元素；所述目标元素具有固定的显示高度；

将所述段落内容填充至所述虚拟元素中，以根据所述虚拟元素生成所述段落内容的高度；

删除所述虚拟元素；

若所述段落内容的高度不大于所述显示高度；将所述段落内容发送至所述目标元素，以使所述目标元素展示所述段落内容。

2.根据权利要求1所述的方法，其特征在于，根据所述展示样式数据创建虚拟元素，包括：

利用JS代码根据所述展示样式数据创建虚拟元素。

3.根据权利要求2所述的方法，其特征在于，还包括：

若所述段落内容的高度大于所述显示高度，根据省略规则对所述段落内容进行省略处理；

将省略处理后的段落内容发送至所述目标元素，以使所述目标元素展示所述省略处理后的段落内容。

4.根据权利要求3所述的方法，其特征在于，根据省略规则对所述段落内容进行省略处理，包括：

向所述段落内容中添加省略提醒信息。

5.根据权利要求1-4任一项所述的方法，其特征在于，还包括：

监听所述目标元素的宽度；

若所述宽度变化，则重新根据所述虚拟元素生成所述段落内容的高度。

6.一种段落内容展示装置，其特征在于，包括：

创建模块，用于获取目标元素的展示样式数据；根据所述展示样式数据创建虚拟元素；所述目标元素具有固定的显示高度；

计算模块，用于将所述段落内容填充至所述虚拟元素中，以根据所述虚拟元素生成所述段落内容的高度；

清理模块，用于删除所述虚拟元素；

发送模块，用于若所述段落内容的高度不大于所述显示高度；将所述段落内容发送至所述目标元素，以使所述目标元素展示所述段落内容。

7.根据权利要求6所述的装置，其特征在于，所述创建模块，具体用于：

利用JS代码根据所述展示样式数据创建虚拟元素。

8.根据权利要求7所述的装置，其特征在于，所述发送模块，还用于：

若所述段落内容的高度大于所述显示高度，根据省略规则对所述段落内容进行省略处理；

将省略处理后的段落内容发送至所述目标元素，以使所述目标元素展示所述省略处理后的段落内容。

9.根据权利要求6-8任一项所述的装置，其特征在于，还包括监控模块，用于：

监听所述目标元素的宽度；

若所述宽度变化，则重新根据所述虚拟元素生成所述段落内容的高度。

10.一种计算机设备，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1至5任一项所述的方法的步骤。

11.一种具有处理器可执行的非易失的程序代码的计算机可读介质，其特征在于，所述程序代码使所述处理器执行上述权利要求1至5任一项所述的方法。

Images