本申请公开了一种多行文本溢出控制方法、装置、设备及存储介质，涉及前端开发技术领域，包括：对待渲染目标文本进行字符串分割得到多个分割后字符串；利用JavaScript函数并按照预设的字符计算规则计算各分割后字符串中字符串的长度，得到第一字符串长度；根据第一字符串长度计算分割后字符串在目标容器中占据的实际行数；判断当前实际行数是否超过容器剩余可容纳文本行数，若是则计算与容器剩余可容纳文本行数对应的总字符数量，并将总字符数量减去预设省略符的字符串长度得到第二字符串长度；根据第二字符串长度和字符计算规则对分割后字符串进行多次截取。本申请能够对多行溢出文本进行合理的省略，避免省略符显示位置偏差，并且能够适应不同的容器。并且能够适应不同的容器。并且能够适应不同的容器。
【技术实现步骤摘要】
一种多行文本溢出控制方法、装置、设备及存储介质
[0001]本申请涉及前端开发
，特别涉及一种多行文本溢出控制方法、装置、设备及存储介质。
技术介绍
[0002]在Web前端
，通常会存在由于多行文本过长而溢出容器的现象，目前主流的方式是在可显示的多行文本末尾添加省略号的方式对溢出容器的文本内容进行省略。
[0003]目前，文本末尾添加省略号的方式具体可基于CSS(Cascading Style Sheets，层叠样式表)属性实现或基于JavaScript(一种解释性脚本语言)来实现。然而，基于CSS属性进行多行文本溢出控制时，无法在末尾空出指定空间放置其他元素，即省略方式较为单一，并且存在一定兼容性问题；而基于JavaScript进行多行文本溢出控制时，通常是直接使用JavaScript截取一定数量的文本，然而当多行文本中包括英文文字和非英文文字，如中英文混合时省略号显示的位置会存在偏差，可能会导致还有较大的剩余空间但后面的文本已经被省略的情况，并且无法自适应不同容器宽度及字体的大小，故使用JavaScript直接截取多行溢出文本并对文本内容进行换行时，会导致截取结果与理想状态有较大出入，甚至出现无法截取的情况，故无法满足实际多行文本溢出控制的需要。
[0004]因此，如何对多行文本进行溢出省略是本领域目前还有待进一步解决的问题。
技术实现思路
[0005]有鉴于此，本申请的目的在于提供一种多行文本溢出控制方法、装置、设备及存储介质，能够对多行溢出文本进行合理的省略，避免省略符显示位置偏差，并且能够适应不同的容器。其具体方案如下：
[0006]第一方面，本申请公开了一种多行文本溢出控制方法，包括：
[0007]获取待渲染至前端浏览器的目标文本，并对所述目标文本进行字符串分割，得到多个分割后字符串；
[0008]利用预先创建的JavaScript函数并按照预设的字符计算规则计算各所述分割后字符串中字符串的长度，得到相应的第一字符串长度；所述字符计算规则为单个英文字符占0.5个字符空间，单个非英文字符占1个字符空间；
[0009]确定渲染所述目标文本的目标容器，并根据所述第一字符串长度计算对应所述分割后字符串在所述目标容器中占据的实际行数；
[0010]分别对各所述分割后字符串进行遍历，以判断当前所述实际行数是否超过容器剩余可容纳文本行数，若是，则计算与所述容器剩余可容纳文本行数对应的总字符数量，并将所述总字符数量减去预设省略符的字符串长度，得到第二字符串长度；
[0011]根据所述第二字符串长度并按照所述字符计算规则对所述分割后字符串进行多次截取，并将截取后剩余的字符串作为待省略文本进行省略。
[0012]可选的，所述对所述目标文本进行字符串分割，得到多个分割后字符串，包括：
[0013]对所述目标文本进行预处理，得到预处理后文本，并对所述预处理后文本进行字符串分割，得到多个分割后字符串。
[0014]可选的，所述对所述目标文本进行预处理，得到预处理后文本，并对所述预处理后文本进行字符串分割，得到多个分割后字符串，包括：
[0015]删除所述目标文本中不可见的字符，得到删除后文本；所述不可见的字符为位于ASCII码中预设区域的字符；
[0016]对所述删除后文本中的字符串进行分割，得到多个分割后字符串。
[0017]可选的，所述对所述删除后文本中的字符串进行分割，得到多个分割后字符串，包括：
[0018]以换行符为段落标记对所述删除后文本中的字符串进行分割，得到多个分割后字符串，并将多个所述分割后字符串保存至预设数组中；
[0019]相应的，所述分别对各所述分割后字符串进行遍历，包括：
[0020]分别对所述预设数组中各所述分割后字符串进行遍历。
[0021]可选的，所述容器剩余可容纳文本行数为上次遍历后所述目标容器剩余可容纳的所有文本的总行数。
[0022]可选的，所述将所述总字符数量减去预设省略符的字符串长度，得到第二字符串长度，包括：
[0023]将所述总字符数量减去预设省略符和位于预设按钮上的显示内容的字符串长度，得到第二字符串长度。
[0024]可选的，所述根据所述第二字符串长度并按照所述字符计算规则对所述分割后字符串进行多次截取，包括：
[0025]根据所述第二字符串长度对所述分割后字符串进行截取，得到第一截取字符串，并将所述第一截取字符串保存至所述目标容器中；
[0026]判断所述第一截取字符串中是否存在英文字符，若存在，则按照所述字符计算规则计算所述第一截取字符串中所有英文字符的长度，得到第一字符长度，并按照所述第一字符长度对所述第一截取字符串后的剩余字符串进行截取得到第二截取字符串，再将所述第二截取字符串保存至所述目标容器中；
[0027]判断所述第二截取字符串中是否存在英文字符，若存在，则继续对所述第二截取字符串后的剩余字符串进行截取，直至当前所述目标容器中剩余可容纳字符长度为0.5且下一个待截取的字符为非英文字符或当前所述目标容器中剩余可容纳字符长度为0时为止。
[0028]第二方面，本申请公开了一种多行文本溢出控制装置，包括：
[0029]文本获取模块，用于获取待渲染至前端浏览器的目标文本；
[0030]字符串分割模块，用于对所述目标文本进行字符串分割，得到多个分割后字符串；
[0031]字符串长度计算模块，用于利用预先创建的JavaScript函数并按照预设的字符计算规则计算各所述分割后字符串中字符串的长度，得到相应的第一字符串长度；所述字符计算规则为单个英文字符占0.5个字符空间，单个非英文字符占1个字符空间；
[0032]容器确定模块，用于确定渲染所述目标文本的目标容器；
[0033]行数计算模块，用于根据所述第一字符串长度计算对应所述分割后字符串在所述
目标容器中占据的实际行数；
[0034]遍历模块，用于分别对各所述分割后字符串进行遍历，以判断当前所述实际行数是否超过容器剩余可容纳文本行数，若是，则计算与所述容器剩余可容纳文本行数对应的总字符数量，并将所述总字符数量减去预设省略符的字符串长度，得到第二字符串长度；
[0035]字符串截取模块，用于根据所述第二字符串长度并按照所述字符计算规则对所述分割后字符串进行多次截取；
[0036]文本省略模块，用于将截取后剩余的字符串作为待省略文本进行省略。
[0037]第三方面，本申请公开了一种电子设备，包括处理器和存储器；其中，所述处理器执行所述存储器中保存的计算机程序时实现前述的多行文本溢出控制方法。
[0038]第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述的多行文本溢出控制方法。
[0039]可见，本申请先获取待渲染至前端浏览器的目标文本，并对所述目标文本进行字符串分割得到多个分割后字符串本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种多行文本溢出控制方法，其特征在于，包括：获取待渲染至前端浏览器的目标文本，并对所述目标文本进行字符串分割，得到多个分割后字符串；利用预先创建的JavaScript函数并按照预设的字符计算规则计算各所述分割后字符串中字符串的长度，得到相应的第一字符串长度；所述字符计算规则为单个英文字符占0.5个字符空间，单个非英文字符占1个字符空间；确定渲染所述目标文本的目标容器，并根据所述第一字符串长度计算对应所述分割后字符串在所述目标容器中占据的实际行数；分别对各所述分割后字符串进行遍历，以判断当前所述实际行数是否超过容器剩余可容纳文本行数，若是，则计算与所述容器剩余可容纳文本行数对应的总字符数量，并将所述总字符数量减去预设省略符的字符串长度，得到第二字符串长度；根据所述第二字符串长度并按照所述字符计算规则对所述分割后字符串进行多次截取，并将截取后剩余的字符串作为待省略文本进行省略。2.根据权利要求1所述的多行文本溢出控制方法，其特征在于，所述对所述目标文本进行字符串分割，得到多个分割后字符串，包括：对所述目标文本进行预处理，得到预处理后文本，并对所述预处理后文本进行字符串分割，得到多个分割后字符串。3.根据权利要求2所述的多行文本溢出控制方法，其特征在于，所述对所述目标文本进行预处理，得到预处理后文本，并对所述预处理后文本进行字符串分割，得到多个分割后字符串，包括：删除所述目标文本中不可见的字符，得到删除后文本；所述不可见的字符为位于ASCII码中预设区域的字符；对所述删除后文本中的字符串进行分割，得到多个分割后字符串。4.根据权利要求3所述的多行文本溢出控制方法，其特征在于，所述对所述删除后文本中的字符串进行分割，得到多个分割后字符串，包括：以换行符为段落标记对所述删除后文本中的字符串进行分割，得到多个分割后字符串，并将多个所述分割后字符串保存至预设数组中；相应的，所述分别对各所述分割后字符串进行遍历，包括：分别对所述预设数组中各所述分割后字符串进行遍历。5.根据权利要求1所述的多行文本溢出控制方法，其特征在于，所述容器剩余可容纳文本行数为上次遍历后所述目标容器剩余可容纳的所有文本的总行数。6.根据权利要求1所述的多行文本溢出控制方法，其特征在于，所述将所述总字符数量减去预设省略符的字符串长度，得到第二字符串长度，包括：将所述总字符数量减去预设省略符和位于预设按钮上的显示内容的字符串长度，得到第二字...
【专利技术属性】
技术研发人员：王泽杰，
申请(专利权)人：上海微盟企业发展有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。