Pure CSS implementation expands and collapses
In the case of unknown width and height, do not use JS, pure CSS implementation of multi-line expansion and collapse
Vue component and sample address
<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" </title> <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> </head> <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> </html>Copy the code