文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法技术

本发明专利技术涉及一种文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法。本方法包括：添加显示容器，设置其显示样式，然后向其中存放需要显示的文本内容，并计算其宽高尺寸；添加非可视容器，设置为与显示容器相同的样式，存放相同的文本内容，然后将其设置为display:inline‑block样式，计算其宽高尺寸；比较显示容器与非可视容器的宽高尺寸，判断文本是否溢出；针对溢出文本，设置省略号的显示并添加工具提示功能以便查看完整文本内容；文本未溢出时，不显示省略号及工具提示。本方法通过智能化处理不定长度文本的溢出显示，使用户能够查看完整的文本内容，并在文本未溢出时，不显示省略号和工具提示，保持了界面的简洁性，改善了用户体验。

【技术实现步骤摘要】

本专利技术属于前端交互组件的设计及实现方法，尤其涉及一种文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法及装置。

技术介绍

1、在目前的浏览器应用开发中，当容器中的文本内容过长时，常常会出现溢出显示的问题。传统的解决方法是使用css的text-overflow属性设置省略号来表示溢出的文本，但使用此方法时无法在文本未溢出时隐藏提示工具。因此，为了使用户获得更好的使用体验，很有必要开发一种新型的前端交互组件，该组件能够在不确定宽度容器中显示不确定长度的文本，并在文本溢出时提供工具提示用户查看完整的文本内容，同时，在文本未溢出时，可保持界面的简洁性，不显示省略号及提示工具，从而减少多余的交互，提升工作的效率。

技术实现思路

1、为了克服现有的溢出文本表示方法存在的上述不足，本专利技术提出了一种新的文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法。

2、本专利技术旨在提供一种前端交互组件的实现方法及装置，用于在不确定宽度容器中显示不确定长度的文本，整体而言，本专利技术方法及装置的本文档来自技高网...

【技术保护点】

1.一种文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，所述方法包括：

2.根据权利要求1所述的文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，步骤S1中所述的设置显示容器的显示样式包括使用CSS的text-overflow属性设置显示容器的宽度和溢出处理方式；

3.根据权利要求2所述的文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，步骤S1中所述的设置显示容器的显示样式包括：将显示容器的宽度设置为不定值；

4.根据权利要求1所述的文本在容器溢出时显示省略号并给出提示的前端交...

【技术特征摘要】

1.一种文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，所述方法包括：

2.根据权利要求1所述的文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，步骤s1中所述的设置显示容器的显示样式包括使用css的text-overflow属性设置显示容器的宽度和溢出处理方式；

3.根据权利要求2所述的文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，步骤s1中所述的设置显示容器的显示样式包括：将显示容器的宽度设置为不定值；

4.根据权利要求1所述的文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，步骤s2中所述的添加一个非可视容器还可通过以下方式实现：通过设置样式position:fixed；top:-999px；left:-999px，使该容器在当前浏览器视窗中不可见。

5.根据权利要求1所述的文本在容器溢出时显示省略号并给出提示的前端交互组件的实现方法，其特征在于，步骤s2中所述的计算该非可视容器的宽高尺寸包括使用window.getcomputedstyle(dom)方...

【专利技术属性】
技术研发人员：胡成志，丁文燕，
申请(专利权)人：中电云计算技术有限公司，
类型：发明
国别省市：