How to convert extra text into ellipses?

First look at the simplest, using text-overflow:ellipsis implementation of single-line text overflow display ellipsis effect

1 Overflow:hidden; 2 text-overflow:ellipsis;//clip|ellipsis

3 White-space:nowrap;

The effect is as follows:

All major browsers support the Text-overflow property. However, this property applies only to single-line text, and multiple lines of stories are far more complex than single rows.

1. Using the -webkit-line-clamp attribute

Width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient : Vertical;border:solid 1px black;

：

It seems that the amount of code is not much, but also easier to understand, set the box to-webkit-box, the direction is set to vertical after the number of lines required -webkit-line-clamp can be

The disadvantage is that this approach applies only to WebKit cores or mobile pages. In Firefox, IE and other browsers do not support.

2. Use the Include ellipsis (...) The implementation of elemental simulation

The idea is to set the fixed width high, the excess part to hide, at the end with an ellipsis (...). ) element to cover some of the content.

. Demo{Height:200px;width:200px;position:relative;Line-height:1.4em;Height:4.2em;Overflow:Hidden;}. Demo::after{content:"...";Font-weight:Bold;position:Absolute;Bottom:0; Right:0;padding:0-20px 1px 45px;Background-color: White;}

Here, a pseudo-element with an ellipsis and a white background color obscures some of the content. Height is three times times higher than line-height . You need to display a few lines of text set to several times.

This way of thinking is relatively simple, compatibility is better.

PS: If you want to be compatible with IE6 or 7, you cannot use pseudo-elements, and you can use a <div> or <span> tag. If you want to support IE8, you need to:: After written: After.

The effect is as follows:

There are also some problems with this approach

The first is that when the text content has too many punctuation, it is easy to cause the end of a single font obscured part of the phenomenon.

This can set the background color of the ellipsis element to a left-to-right transparency effect, and increase the distance to the text appropriately. or control the use of text content symbols.

Second, when the text content does not exceed a fixed number of lines, such as only one row or two lines, the ellipsis will also be fixed in the lower right corner of the Div.

or the text content only occupies the middle of the third row, the ellipsis will also be fixed in the lower right corner and will not follow the text at the end. Not beautiful.

You can add a P tag to the DIV and use JS to judge that the ellipsis element is displayed when the P element height reaches the parent element's fixed height.

HTML code:

<class= "Demo"><p> Ah ha ha ha ha ah ha ha ha ha ha ha ha ha ah ha ha ah aha ah oh </p><  -- Class= "Demo1">... </ Div > </ Div >

Css:

1 . Demo{2 Height:200px;3 width:200px;4 position:relative;5 Line-height:1.4em;6 Height:4.2em;7 Overflow:Hidden;8}9 . Demo1{Ten Font-weight:Bold; One position:Absolute; A Bottom:0; -  Right:0; - padding:0-20px 1px 45px; the Background-color: White; -} - P{ - margin:0; +}

Javascript:

1 if ($ (". Demo P"). Height () <=$ (". Demo"). Height ()) {2             $ (". Demo1"). Hide (); 3         }

3.js code to determine the number of words

 function   Cut (demo,num) { 2  var  str=demo.html ();  3  num) { 4  var  Strn=str.substrin G (0,num);  5  strn+= "..."  6   demo.html (StrN);  7   8
      } 

Reference: http://www.css88.com/archives/5206

How to convert extra text into ellipses?