Shulou(Shulou.com)06/03 Report--

This article mainly introduces "the usage of single-line truncation and multi-line truncation of css". In daily operation, I believe many people have doubts about the usage of single-line truncation and multi-line truncation of css. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about the usage of single-line truncation and multi-line truncation of css. Next, please follow the editor to study!

Single-line truncation: span {display: inline-block; / / if it is not a block element, you also need to set this. Width: 150px; / / excess width overflow: hidden; / / exceed hidden text-overflow: ellipsis; / / exceed ellipsis white-space: nowrap; / / do not wrap} multi-line truncation:

There are several ways to truncate multiple lines

1: the simplest, use-webkit-line-clamp, of course, can only be used in webkit kernel browsers, and does not support custom click expansion styles.

P {width: 400px; / / beyond this width text-overflow: ellipsis; / / use ellipsis display:-webkit-box; / / must use this overflow: hidden;// must be used, beyond hidden-webkit-line-clamp: 4; / / required setting,-webkit-box-orient: vertical; / / set the order of the elements in the text-align: justify; / / problem arrangement}

2: it is also the way to answer in the interview, using pseudo classes. This applies to situations where you already know that it is a large piece of text because you want to use js to determine whether it is out of order. But the interviewer is not very satisfied with this way, woo-hoo.

P {position: relative; height: 36px; / / the interviewer said it was doomed, so it was not flexible. It feels strange. If it's not dead, how do you know what's overflowing? Overflow: hidden; line-height: 18px;} p::after {/ / this is always an ellipsis, so you need js to determine whether it exceeds it, and if so, add a class. Content: '...'; position: absolute; bottom:0; right: 0;}

3: using float, very complicated, do not like float., using float, the ellipsis is a dom node, so you can add things and styles, a high degree of customization!

Founded in November 1998, Tencent is one of the leading Internet value-added service providers in China. Since its establishment more than 10 years ago, Tencent has been adhering to the business philosophy of "everything based on user value", providing stable and high quality services for hundreds of millions of users, and has always been in a state of steady development. On June 16, 2004, Tencent Holdings Limited was publicly listed on the main board of the Hong Kong Stock Exchange (stock code 700). ... More

Standard is a standard, when it exceeds its height, it will show an ellipsis. Container is a container. If it exceeds its maximum height, it is hidden. All three div are float:right, where the width of the margin-left:-standard of the content, let the standard out, let the standard appear on the left.

.container {max-height: 54px; / / maximum height overflow: hidden; / / exceeds hidden line-height: 18px; / / it is convenient to calculate several lines. Font-size:12px;} .container div {/ / all three elements set float float: right;} .content {margin-left:-50px; / / this is the first element, and because its width is 100%, it needs to give the standard location. Width:100%; position:relative; background: hsla (229,100%, 75%, 0.5)} .standard {width:50px; / the width is arbitrary and needs to be the same as the above margin-left height: 54px; / / beyond this height there will be a more element position:relative; color:transparent; background: hsla (334,100%, 75%, 0.5);} .more {width:50px / / this element is customizable. The width height:18px; position: relative; left: 100%; / / determine the location, transform: translate (- 100% copyright 100%); / / determine the location background: linear-gradient (90deg, rgba (255,255,255,0), # fff 20%, # fff); / / this uses a gradient, because the more element overrides the content element. }

Summary: you can directly use the float method to facilitate custom styles and listen to events, and good compatibility, is the most perfect solution for the time being.

At this point, the study of "the use of single-line truncation and multi-line truncation of css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.