Origin#
The theme I want to share this time is "expand and collapse" for multiline text. This requirement is common in everyday situations, but it requires a lot of techniques to implement. Let's think about it together with the author.
Figure 1-1: Illustration of expand and collapse text
Solution#
Floating#
When we see the position of this button, we can roughly understand that this effect cannot be achieved simply by layout or positioning. It requires the use of floating to achieve this kind of mixed text and image effect.
If the button is not displayed, click here to open this example on the website.
Now we can see that the text and button have been successfully mixed together, forming a structure similar to mixed text and images. The next step is to move the button to the right of the text ellipsis. How can we achieve this? Actually, there is another floating element next to the button, and then use clear: right; or clear: both; to clear the float on the right side of the button and move the button down. So how do we create this floating element? Actually, it's just as simple as creating another element and floating it to the right.
If there are any display issues, click here to open this example on the website.
In the above example, we used a div to create a floating element. In fact, a simpler way is to directly use the before element of the div.main to create a height, so that we don't need to add an extra element to disrupt the readability.
In the above example, there is actually another problem. The height of before/div.line is hard-coded here, but it should be flexible coding in actual applications. The first solution that comes to mind is to change height: 88px; to height: 100%;. It's a good idea, but let's try it out. We will magically find that height: 100%; doesn't work, and there is still no height. Questionable🤨, not sure why the height is not working here
Added on 2023-07-06:
For the issue ofheight: 100%;not working, please refer to my article Investigation of the Issue ofheight: 100%;Not Working
The effect has been achieved preliminarily, and all that remains is to simply handle the styles of the "expand" and "collapse" states. The simplest way without any tricks is to directly write a piece of JS to add/remove the multiline ellipsis style to div.main based on the click. Here, we will use another approach, a different technique to achieve the same effect using only HTML and CSS without using JS. We all know the label tag, which, when combined with <input type="checkbox">, can achieve a control effect, i.e., select/deselect, and the input also provides pseudo-classes for the selected state. This makes it even more convenient. The last question is how to change the text of the button? I don't know if you are familiar with the content CSS property, which can completely fill an element with content. This way, we can achieve the same effect as what can be done with JS using only HTML and CSS.
If there are any issues with the example, click here to open it on the website.
Font Styles#
Let's try a different approach. Instead of using the button, let's directly change the font style of the ellipsis … to any style we want. This involves font styles, and we will use iconfont to directly use our own defined font style.
At the same time, we need to change the character corresponding to the expand state to the ellipsis …, with a Unicode value of 2026 and a character of ….
Be careful not to confuse it with ..., otherwise each . will correspond to an expand icon, which is a sad story. The following image is an incorrect example.
Now the expand button can be called a shape, but it doesn't have its functionality yet, because currently there is no way to achieve expand and collapse with just this method. We still need to add a real way to control the state. However, this method is basically the same as the aforementioned label and <input type="checkbox">. The only difference is that we need to manually give the label a width and height to position it at the bottom right corner of the container, which is the position of the ellipsis.
Simulating Container with JS#
This idea came from seeing a text ellipsis component in vant. Out of curiosity, I went to check the source code on GitHub. It was an eye-opening experience. Oh my goodness, this operation is too 👖🌶️!
The so-called simulating container is to clone a container that is the same as the collapsed text container, and then move the cloned container outside the viewport. We continuously reduce the number of characters in the cloned container and continuously check the predetermined height of the collapsed text with the current height of the container. This way, we can find the appropriate number of characters. Finally, we concatenate the ellipsis and the button to achieve our goal.
Conclusion#
I have seen this problem a few times, and every time I solved it using the floating solution, until this time I really thought about other solutions. Although it was not my own idea, learning from others' excellent ideas is also a way to grow.
References:
https://juejin.cn/post/6963904955262435336
https://juejin.cn/post/7214839315855491130
https://github.com/youzan/vant/blob/main/packages/vant/src/text-ellipsis/TextEllipsis.tsx