Read the summary of this blog post, and read it in detail

Methods a

Multiple lines of text truncated, exceeding partial ellipses

<div class="text">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 another floating element.</div>
Copy the code

When we’re talking about limiting the number of lines, if we’re out of ellipsis, we’re going to use display: -webkit-box

.text { 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
   }
Copy the code

When we add a button and we want it to wrap around, we need to have a floating float

<div class="text"> <button class=" BTN "> Pan until you hit the border of the container, or another floating element. </div>Copy the code
.btn { float: right; margin-top: 45px; /* Other decorative styles */}Copy the code

Will find that there is a blank, apparently margin and can’t solve the problem, but the whole text is influenced by the floating button, if there are multiple floating, they would also be lined up, this time we only need to make two floating up and down element arrangement, thus keeping the text around the effect, there will be no gap

.text::before{ content: ''; float: right; width: 10px; height: 45px; /* set a height */ background: red} // BTN clear float. /* Clear: both; /* Clear float */}Copy the code

In this case, we just need to set the width of the pseudo element to 0, and we need to set the height of the pseudo element to the dynamic height using CSS calc function. When using calc(100%-24px), the height of the pseudo element will be 100% invalid. Set to display: flex

I’m going to end up here, but it turns out that this code only works in Chrome, it doesn’t work in Firefox, it doesn’t work in Safari at all. Display: -webkit-box works in firefox or something like that, unlike Chrome, and we’re going to have to find other ways to make it work with multiple browsers

Method 2

When it comes to CSS state switching, everyone can think of input type=”checkbox”. We also need to use this feature here. First we add an input, then replace the button with a label, and associate it with a for attribute

<div class="wrap"> <input type="checkbox" id="exp"> <div class="text"> <label class=" BTN "for="exp"></label> How to locate floating elements As we mentioned earlier, when an element floats, 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 another floating element. </div> </div>Copy the code

The next step is to switch between displaying 3 lines and not limiting the number of lines

.exp:checked+.text{ max-height: none; /* You can directly set the maximum height to a large value, or set it to None */}Copy the code

One trick is to use pseudo-content generation technology whenever you encounter content that needs to be dynamically modified. The specific approach is to remove or hide the text inside the button and use pseudo-element generation

<label class="btn" for="exp"></label><! -- Remove button text -->
Copy the code
.btn::after{content:' expand '/* generate */}.exp:checked+.text. BTN ::after{content:' fold'} .btn::before { visibility: hidden; }. BTN ::before{content: '... '; position: absolute; left: -5px; color: #333; transform: translateX(-100%) }Copy the code

That’s pretty much it, but there’s a problem with hiding buttons when there’s less text

  • Here we can give the container an after pseudo-element that will take up the remaining space on the line where the trailing text is.
  • When the text is less and the expand button is on a line with it, it can cover the expand button and achieve the effect of hiding the expand button
  • When there is more text, the extra text is.textOf the containeroverflow:hiddenHide it. At this time, the after pseudo-element is not in line with the expand button, so the expand button is naturally exposed, which achieves the effect of more text, ellipsis and expand button
.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
}
Copy the code
  • When the expand button is clicked, the fold button needs to be displayed. In this case, the fold button is covered by the After fake element. In this case, the fake element needs to be hidden, so we need the following style
.exp:checked+.text::after{ visibility: hidden; } // When selected, the after element is hiddenCopy the code

At this point, the implementation is almost complete, so add the hidden property to the input and hide it

conclusion

With regard to text truncation, the -webkit-box property is not as perfect as all browsers support, so in order to be compatible with multiple browsers, a pure CSS implementation of multi-line text expansion and collapse, is relatively reasonable

  • Text wrap effects first consider floating floats
  • Flex layout child elements can calculate height by percentage
  • Multi-line text truncation can be used in conjunction with text wrap effectsmax-heightAnalog implementation
  • State switching can be implemented using label and input with checkbox
  • CSS change text can be generated using pseudo-elements
  • You can use CSS to block out the mask