This article first appeared in vivo micro-channel public number of Internet technology
links: https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw
Author: He Yanjun
Currently in the development of mobile terminal display interface, if the number of a piece of text is too long, limited by higher factors wide screen, there may not be fully displayed, this time will be displayed as text to overflow ellipsis.
Recently experienced a series of similar needs, then do a summary and record here.
First, a basic requirement is that when the maximum width of more than one line of text, the excess portion becomes ellipses, as shown below.
This feature basis for comparison, can be achieved only with css, the following code block shown in FIG.
But sometimes the product students want the text display can be a little more, so there needs to display multiple lines of text overflow ellipsis, as shown below.
This function can also be achieved by css, code block as shown in FIG.
Here used css webkit extended attributes, and therefore suitable for webkit browser and mobile terminal, and has had some effect in terms of compatibility, but as long as the machine is not particularly old, still fully able to support.
After support multiple lines of text overflow ellipsis display function, the students also found the product unfriendly experience points, as shown below. In the second line of text at the beginning to the end, which led most of the second line is blank, the impact of aesthetics.
Therefore, the product the students made a new demand:
-
When the text does not exceed half of the x-row, first press overflow line x-1 display mode display ellipsis; (except for the first row)
-
When more than half of the text row x, but x does not exceed the first row, then the normal display;
-
When the text exceeds the first x rows, press row x overflow ellipsis way to show.
This requires to calculate the width of the text actually occupied in order to choose which method of display used.
Find information learned, canvas provides a way measureText returns an object that contains the method, this object contains the specified font width in pixels.
If you need to display text before, you understand the width of the text, you can use this method.
The above code shows the following results:
Canvas may then be based on the ability to achieve this function, the following approximate flowchart shown in FIG.
这里最关键的是要计算出每一行可以显示多少文本，利用canvas的measureText方法，可以达到这个效果，伪代码如下所示。
虽然canvas可以计算出文本显示的宽度，并且兼容性和性能都还不错，但是当某一行末尾出现特殊符号或者是英文单词时，就会出现预期外的情况。
浏览器实际渲染出来的时候，如果末尾有特殊符号时会连同前面的字符一起换行，而如果末尾有英文单词时也会将这个英文单词换行展示。
但通过canvas计算出来的结果，会导致每一行的文本增多了，从而跟预期的展示效果有出入。
因此，这种方案只能适用于文本中不包含特殊符号和英文单词的场景。
一段时间后，产品同学感觉展示那么一段文本有点儿单调，于是又提出了一个进阶版的需求：
-
文本的首行开头需要缩进或者可以配置一个图标；
-
文本的末尾可以配置按钮或者图标，并且如果文本超过了范围需要显示省略号，但是省略号需要在按钮或图标的前面。
顺带给出了一个参考示例，如下图所示。
由于之前没有遇到过类似的需求，于是开始google这个问题，经过海量的检索，终于发现了该问题实现的方案。
原来网上也有很多朋友遇到了这样的需求，并专门写了单独的组件来使用，比如：
HeyUI：https://www.heyui.top/component/other/textellipsis
vue-text-ellipsis：https://github.com/Luobata/vue-text-ellipsis
它们的思路都是通过最终展示的实际高度是否超过预期的容器高度来判断是否需要删减文本。其流程图大概如下图所示。
就这样，通过现成的组件就解决了一个难题。
然鹅，本以为需求已经告一段落了，哪知产品同学又开始了体验上的深度挖掘。
她们认为，展示的文本样式不应该都是一样的。
有些文本表达的意思可能比较重要，这就需要重点引起用户的注意。
而有些文本表达的意思可能重要程度一般，这就不需要用户注意。
于是乎她们又提出了一个通过高亮文本来提升用户体验的需求：
-
能够根据文本的标记进行高亮展示
比方说，获取到下面一段文本，它要显示出入下图所示的那样高亮效果。
由于文本高亮需要通过标签将文本包裹起来并添加高亮样式才能实现，而之前的组件是通过v-text的方式实现的，因此这里不能直接使用，需要将组件改造成v-html的方式插入才可以。
假如通过v-html插入文本，并且设置了em标签的样式，那么就会有一个问题，组件是通过循环剔除最后一个字符直到实际高度小于容器高度来实现展示功能的，这就有可能截掉标签字符，导致最后的展示有异常。
所以，在截取文本的时候还需要做一些处理，流程图如下图所示。
到这里，已经实现文本的一种高亮形式了，但是假如有好几个部分的文本需要高亮且高亮的样式还各不相同，这又要怎么解决呢？
一种思路是，通过几种不同名称的标签分别包裹需要高亮的文本，每一种标签会对应一种高亮样式，这样的话，在获得源文本后，首先通过词法分析将源文本中的标签解析出来，后面的流程就跟上图步骤1后面的流程类似了。
更多内容敬请关注 vivo 互联网技术 微信公众号
注：转载文章请先与微信号：labs2020 联系。