Sample code sharing about text-overflow attribute and text truncation in CSS

This article mainly introduces you to the relevant information about the text-overflow attribute and text truncation in CSS. The article gives detailed sample codes for your reference and study. I hope the content of this article will be useful to you. Front-end developers can bring some help. Friends who need it can follow the editor to learn together.

Preface

This article mainly introduces to you the relevant content of the text-overflow attribute and text truncation in CSS, and shares it for your reference. To learn, let’s take a look at the detailed introduction:

text-overflow and text truncation

CSSers must be very familiar with text-overflow , and for the truncation of a single line of text, the three lines of code including text-overflow: ellipsis; may also be the most commonly used by us.

text-overflow: ellipsis;  
overflow: hidden;  
white-space: nowrap;

This small piece of CSS is even compatible with IE6. After all, text-overflow: ellipsis; was originally exclusive to IE, so the early fight against text truncation was mainly on Firefox, until With Firefox 7.0, we put aside the tricks for FF and focused on using this code. Of course, multi-line truncation is still out of the question. In some situations with high cross-browser compatibility requirements, the front-end once needed the back-end to help truncate the content.

Although there are other ways to achieve multi-line text truncation, it was impossible to take care of everything in the browser form at the time. For example, you can now use the pseudo-element :after to position the end of multiple lines and apply a gradient transition to simulate truncation.

.clamp{
  height: 3 .6em;
  line-height: 1.2em;
  overflow: hidden;
  position: relative;
}
.clamp:after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

The use of gradients makes the truncation look less stiff, but I have never used it in actual situations:), because this method has many disadvantages, and I I never like to use this ugly-looking method. Unless I'm forced to do something urgent, I always say to others seriously: "I can't do it"~

If it's just webkit, the usual approach is -webkit-line-clamp, for the current webkit The mobile version dominated by it is a relatively good method, and the effect is exactly what we expected:

display: -webkit-box;  
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

After many years (>5), this code It still works well, but looking back now, -webkit-box is the old flex syntax. Although it coexists with the new flex syntax now, it may be gone one day. But even so, there is no better way, there is no attribute that replaces -webkit-line-clamp, and the old and new syntax cannot be mixed, so we have to continue to use the "classic" code.

-webkit-line-clamp has another small problem, that is, its support for Chinese is flawed. Compared with the perfect effect in English, when using Chinese, as the width of the container changes, the three truncated points "..." tend to be awkward, and only 2 points or even 1 point are displayed. I hope you can browse the updated version. The device can solve this small problem.

When text is truncated, we are always accustomed to using three dots to express it by default. In fact, except for the pseudo-element simulation method mentioned above, we cannot change this representation. However, if we look back at the text-overflow attribute, the new version of the standard will bring more possibilities.

CSS Basic User Interface Module Level 3 is currently in CR status. text-overflow has only two optional values: clip or ellipsis. However, at Level 4 in the draft, the attribute values ​​have become more:

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

We can specify text to replace the three points that remain unchanged when truncated, we can specify the transition and control its distance, and even provide two values To control the beginning and end of the line at the same time... Although this seems to be of no use, Firefox actually first supported the value and double-value syntax as early as 9.0! I wonder, could it be that after Firefox was criticized for text-overflow, it changed its past and moved into the latest pitfall...

However, text-overflow is still the same text-overflow , still a single line, still with the old partner white-space: nowrap;, still the familiar flavor. Even though there may be some more fashionable functions, it still cannot conceal our lack of means for multi-line truncation.

Summarize

The above is the detailed content of Sample code sharing about text-overflow attribute and text truncation in CSS. For more information, please follow other related articles on the PHP Chinese website!