1. The first way

<style> .content { display: flex; } .text { width: 475px; border: aqua solid 1px; color: #333; font-size: 14px; } .text.show::before{ content: ''; float: right; height: 100%; margin-bottom: 40px; } .text.show .btn { display: block; } .btn { color: dodgerblue; cursor: pointer; float: right; clear: both; margin-right: 8px; display: none; } .ellipsis { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } #exp { display: none; } #exp:checked+.ellipsis{ display: flex; }. BTN ::after{content:' '} #exp: :.ellipsis. BTN ::after{content:' '} #exp:.ellipsis. margin-bottom: -20px; } </style> <body> <input type="checkbox" id="exp" /> <div class="content ellipsis"> <div class="text"> <label Class =" BTN "for="exp"></label> <span> But there was a thunder of hooves, and a dozen horses rolled up the hill like the wind. At once the passengers wore a cloak of dark felt with dark cloth cloths inside. But the men looked like tigers and the horses looked like dragons. Each horse had a tall head, long legs and black fur. There were nineteen horsemen, not many in number, but as strong as a thousand horses. The first eighteen horsemen ran up to each side, </span> </div> </div> <script> function getLineHeight(el) {var temp = document.createElement(el.nodename), ret; temp.setAttribute("style", "margin:0; padding:0; " + "font-family:" + (el.style.fontFamily || "inherit") + "; " + "font-size:" + (el.style.fontSize || "inherit")); temp.innerHTML = "A"; el.parentNode.appendChild(temp); ret = temp.clientHeight; temp.parentNode.removeChild(temp); return ret; } let el = document.querySelector('.content') let text = document.querySelector('.text') if(Math.round(el.clientHeight /  getLineHeight(el)) >= 3) { text.classList.add('show') } </script> </body>Copy the code

2. The second way of writing

.wrapper { display: flex; margin: 50px auto; width: 800px; overflow: hidden; /* resize: horizontal; */ border-radius: 8px; padding: 15px ; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; } .text { font-size: 20px; overflow: hidden; text-overflow: ellipsis; text-align: justify; /* display: flex; */ /* display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; */ position: relative; The line - height: 1.5; Max - height: 4.5 em. transition: .3s max-height; } .text::before { content: ''; height: calc(100% - 26px); float: right; } .text::after { content: ''; width: 999vw; height: 999vw; position: absolute; box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff; margin-left: -100px; } .btn{ position: relative; float: right; clear: both; margin-left: 20px; font-size: 16px; padding: 0 8px; background: #3F51B5; line-height: 24px; border-radius: 4px; color: #fff; cursor: pointer; /* margin-top: -30px; */}.btn::after{content:' expand '}.exp{display: none; } .exp:checked+.text{ max-height: none; } .exp:checked+.text::after{ visibility: hidden; } .exp:checked+.text .btn::before{ visibility: hidden; }.exp:checked+.text.btn ::after{content:' '}. '; position: absolute; left: -5px; color: #333; transform: translateX(-100%) } <div class="wrapper"> <input id="exp1" class="exp" type="checkbox"> <div class="text"> <label Class =" BTN "for="exp1"></label> How float elements are positioned As we mentioned earlier, when an element is floated, it is moved out of the normal document flow and then shifted left or right until it hits the border of the container, Or hit another floating element. In the picture below, there are three red squares. Two of them float to the left and one to the right. Notice that the second square floating left is placed to the right of the first square floating left. If there are more squares floating like this, they will continue to stack to the right until they fill a full row of the container, and then move to the next row. </div> </div> <div class="wrapper"> <input id="exp2" class="exp" type="checkbox"> <div class="text"> <label class="btn" For ="exp2"></label> As we mentioned earlier, when an element is floated, it is moved out of the normal document flow and then shifted left or right until it hits the border of the container it is in, or touches another floating element. </div> </div>Copy the code

3. The third way of writing

<style> .container { padding: 50px; } .line-clamp { display: flex; }. Line-clamp -content {max-height: 4.5em; The line - height: 1.5; overflow: hidden; text-overflow: ellipsis; text-align: justify; position: relative; } .line-clamp-content::before { content: ''; width: 0; float: right; Height: calc(100%-1.5em + 1px); } .line-clamp-content::after { content: ''; position: absolute; width: 200vw; height: 100vh; Box-shadow: inset-100vw calc(1.5em-100vh) 00 # FFF; margin-left: -100vw; } .line-clamp-btn { float: right; background-color: rgb(136, 110, 160); Border - the radius: 0.2 em. Padding: 0.2 em 0; clear: both; } .line-clamp-btn>span { color: #fff; }. Line-clamp - bTN-open {margin-left: 1.3em; transform: translate(0, -1px); position: relative; cursor: pointer; } .line-clamp-btn-open::before { content: '... '; The transform: translate (1.3 em, 0); position: absolute; } .line-clamp-btn-close, .line-clamp-checkbox, .line-clamp-checkbox:checked+.line-clamp-content::before, .line-clamp-checkbox:checked+.line-clamp-content::after, .line-clamp-checkbox:checked+.line-clamp-content .line-clamp-btn-open { display: none; } .line-clamp-checkbox:checked+.line-clamp-content { max-height: inherit; } .line-clamp-checkbox:checked+.line-clamp-content .line-clamp-btn-close { display: inherit; } </style> <body> <div class="container"> <h1> Pure CSS implementation expand and fold </h1> <div class="line-clamp"> <input type="checkbox" class="line-clamp-checkbox" id="checkbox" /> <div class="line-clamp-content"> <label for="checkbox" Class =" line-clam-bTN line-clam-bTN-open "> < SPAN > expand </span> </label> Main use float:right CSS property specifies that elements should be placed along the right side of their container, Allow text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid. Using the parent display: Flex (Grid) feature, the Flex item size is automatically calculated based on the content. The percentage height of flex items can be used. Get the position height <code>calc(100%-1.5em +1px)</code> add 1px to avoid the decimal height insufficiency in the calculation. <label for="checkbox" class=" line-clam-bTN line-clam-bTN-close "> < SPAN > </span> </label> </div> </div> </div> </div> </body>Copy the code