current position:Home>How does wechat applet realize Click to view all

How does wechat applet realize Click to view all

2022-02-02 20:11:55 CSDN Q & A

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

img




Refer to the answer 1:

Cover half with pseudo classes

img

.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;}



Refer to the answer 2:



Refer to the answer 3:



Refer to the answer 4:



Refer to the answer 5:

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 */



Refer to the answer 6:



Refer to the answer 7:

css Show two lines Style can achieve . Click all Just remove style Or class name .




Refer to the answer 8:

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.primo.wiki/2022/02/202202022011532060.html

Random recommended