How to Use CSS to automatically omit excessive long lines of text

In CSS, we can use the following style to automatically truncate the text in the DIV element after it is too long and end with a ellipsis:

 
Overflow: hidden; Word-break: normal; text-overflow: ellipsis;
 

Text-overflow: ellipsis is a key style that ends with a ellipsis after text truncation. However, if this style is added, the text in the DIV element cannot be automatically wrapped, that is to say, this effect can only be implemented on a single line of text. In addition, word-break: normal can prevent text from being partially truncated, which is especially important when the content is English.

To enable automatic multi-line text truncation to end with a ellipsis, a Javascript script is usually used. The followingArticleThis section describes how to use a script to perform string truncation, but only in the English environment.

Http://www.barelyfitz.com/projects/truncate/

Http://www.javascriptsource.com/miscellaneous/truncate-text.html

Http://www.javascriptbank.com/truncate-html-text.html/en/

Using a pure CSS style to achieve this effect is a little complicated. You need to know how to perform hack in CSS. Here is an example that can achieve this effect in multiple General browsers:

 <!  Doctype html  > <  Html  >  <  Head  >      <  Style  >  HTML, body, P  {  Margin  :  0  ; Padding  :  0  ;  Font-family  :  Sans-serif  ;  }  . Ellipsis  { Overflow  :  Hidden  ;  Height  :  200px  ;  Line-height  :  25px ;  Margin  :  20px  ;  Border  :  5px solid # aaa  ;   }  . Ellipsis: before {  Content  :  ""  ;  Float  :  Left  ;  Width  : 5px  ;  Height  :  200px  ;   }  . Ellipsis> *: First-child  {  Float  : Right  ;  Width  :  100%  ;  Margin-left  :  -5px  ;   } . Ellipsis: After  {  Content  :  "/02026"  ;  Box-Sizing  :  Content-box  ;  -WebKit-box-Sizing :  Content-box  ;  -Moz-box-Sizing  :  Content-box  ;  Float  :  Right  ; Position  :  Relative  ;  Top  :  -25px  ;  Left  :  100%  ; Width  :  3em  ;  Margin-left  :  -3em  ;  Padding-Right  :  5px ;  Text-align  :  Right  ;  Background  :  -WebKit-gradient (linear, Left top, right top, from (rgba (255,255,255, 0), to (white), color-stop (50%, white ))  ;  Background :  -Moz-linear-gradient (to right, rgba (255,255,255, 0), white 50%, white)  ;  Background  :  -O-linear-gradient (to right, rgba (255,255,255, 0), white 50%, white)  ;  Background  : -MS-linear-gradient (to right, rgba (255,255,255, 0), white 50%, white)  ;  Background  :  Linear-gradient (to right, rgba (255,255,255, 0), white 50%, white)  ;   }      </  Style  >  </  Head >  <  Body  >      <  Div  Class  = "Ellipsis"  > <  Div  >          <  P  > Call me Ishmael. Some years ago & Ndash; Never mind how long precisely & Ndash; Having little or no money in my purse, and nothing particle to interest me on shore, I thought I wowould sail about a little and see the watery part of the world. it is a way I have of driving off the spleen, and regulating the circulation. whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off & Ndash; Then, I account it high time to get to SEA as soon as I can. </  P  >         </  Div  > </  Div  >  </  Body  >  </  Html  > 

By modifying. EllipsisAnd. Ellipsis: beforeSpecify the height of the container by specifying the value of the height attribute in the style. The implementation of this style is tested in multiple browsers of different versions. Note that if you are viewing it in IE, make sure that your document model is in standard mode, that is, the document mode must be standards.

Here is the original source: CSS ellipsis: How to manage multi-lice ellipsis in pure CSS