# How does wechat applet realize Click to view all

2022-02-02 20:11:55

functional requirement , The text only displays two and a half lines , To hide beyond , And add... At the end of the text Check all The label of , Click to see all , All text is displayed
Exclusion scheme ： exclude A scheme for calculating according to the length of text , Because the text may have line breaks , You can't just calculate based on the length of the string

Cover half with pseudo classes

``.box {  position: relative;  line-height: 1.4em;  /*  Several times the height shows several lines  */  height: 4.2em;  overflow: hidden;}.box::after {  content: "...";  position: absolute;  width: 50vw;  bottom: 0;  right: 0;  background: #fff;}``

utilize css What about the properties of , I've only done more than display ellipsis , Didn't add that to the back ‘ Check all ’

``    overflow:hidden;/* Beyond hiding */    text-overflow:ellipsis;/* Show ellipsis when text overflows */    display:-webkit-box;/* Set the elastic box model */    -webkit-line-clamp:3;/* Lines of text , If you want to set 2 Xingjia ... Is set to 2*/    -webkit-box-orient:vertical;/* The descendant elements are displayed vertically */``