Before we talk about multi-line text overflow hiding, let’s talk about single-line text

// Single-line text overflow needs to meet three conditions: overflow:hidden; white-space:nowrap; text-overflow:ellipsis;Copy the code

However, after tests, the same method is not applicable to multi-text, and multi-text overflow needs to meet the following conditions:

display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; // Child elements should be aligned horizontally or vertically -webkit-line-clamp:3; // Ellipsis is displayed after 3 linesCopy the code

Demo: multi-line text more than three lines hidden, ellipsis display, and ellipsis after the display of ‘expand’ two words, click the content of the complete display and can shrink freely. The final result is shown as follows:

Step 1: Overall frame: (a button, a paragraph of text)

<div class="text"> <label class=" BTN "> </label> <span> Every time I step on the field, I have only one thing in mind: try my best to run "China speed" and add luster to my country! Breaking the Asian record, breaking the limit of the yellow race, and standing on the track in the 100 meters final of the Tokyo Olympic Games, all my dreams have come true in this moment! 100 meters of runway is faster than who ran, and the runway of life is farther than who ran, better, more broad. Please believe in Chinese track and field, believe in yourself, nothing is impossible! </span> </div> <style> .text { width: 475px; border: #efd56e solid 1px; color: #333; font-size: 14px; } .btn { cursor: pointer; } </style>Copy the code

Place ‘expand’ in the lower right corner of the layout

Text ::before{content: '"; float: right; width: 0; height: calc(100% - 20px); } // If a height collapse occurs, the height does not take effect. <div class="content"> <div class="text"> <label class=" BTN "for="exp"> </label> <span> Every time I step on the field, I have only one thing in mind: try my best to run "China speed" and add luster to my country! Breaking the Asian record, breaking the limit of the yellow race, and standing on the track in the 100 meters final of the Tokyo Olympic Games, all my dreams have come true in this moment! 100 meters of runway is faster than who ran, and the runway of life is farther than who ran, better, more broad. Please believe in Chinese track and field, believe in yourself, nothing is impossible! </span> </div> </div>Copy the code

Text over three lines overflow hiding effect

// Add CSS styles to the text selector. Text {display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }Copy the code

Step 4: Implement expand and fold function (use input type=’checkbox’ to control state switching) and bind label label, use pseudo element to control text of button (expand/fold)

<div class="content"> <input type="checkbox" id="exp" /> <div class="text"> <label class="btn" for="exp"></label> <span> The world martial arts, only fast not broken! Every time I step on the field, I have only one thing in mind: try my best to run "China speed" and add luster to my country! Breaking the Asian record, breaking the limit of the yellow race, and standing on the track in the 100 meters final of the Tokyo Olympic Games, all my dreams have come true in this moment! 100 meters of runway is faster than who ran, and the runway of life is farther than who ran, better, more broad. Please believe in Chinese track and field, believe in yourself, nothing is impossible! < / span > < / div > < / div > < style >. The BTN: : after {content: 'a'} # exp: checked +. Text. BTN: : after {content: 'fold'} < / style >Copy the code