The pure CSS method solves the problem of text overflow and truncation.

When you output news entries on the homepage or sidebar of a website, text overflow and truncation often occur. This problem has plagued me for a long time and has recently been encountered again. I continue to improve my methods in the spirit of "improving a little bit every day ".ArticleAfter several tests, I finally decided to use the pure CSS method to solve this problem. I have solved this problem through programming and Js, now, the development of standard CSS attributes and private attributes of various browsers gives us the opportunity to solve this problem again. It is a new attempt to do so.

Assume that I want to output a set of news entries. Each news title is followed by a news publication date, and the date must be completely displayed, however, if the total length of the title and date exceeds a certain value, the title is truncated.

First look at the demo: http://www.threesnow.com/code/089/

After watching the demo, I will focus on CSS.CodeA key attribute used: Text-overflow.

 
Text-overflow: ellipsis;
 

This attribute defines how to truncate text when the text overflows. When the attribute value is ellipsis, the omission mark (…) is displayed when the text in the object overflows (...), This attribute supports IE7/8/9 or later versions of IE6 and modern standard browsers other than Firefox: chrome and safari. For opera, there is a corresponding private attribute:

 
-O-text-overflow: ellipsis;
 

I wrote the structure of a news entry as follows:

  
   
  
 
    
   
  overflow   2012-05-30  
 
    
   
  overflow   2012-05-31  
 
    
   
  text overflow   2012-06-01  
 
    
   
  Text wrap when overflow occurs   
 
    
   
  wrap and match text when overflow occurs    
 
    
   
  wrap the text when overflow occurs.   2012-06-04  
 
    
   
  when overflow occurs, wrap the text and match it with the above   
 
    
   
  wrap text when overflow occurs and match the above fix   2012-06-06  
 
    
   
  wrap text when overflow occurs and match the fixed height above   2012-06-07  
 
   
  
  

The complete CSS code is as follows:

 * { Margin : 0 ; Padding : 0 ;} # News { Margin-top : 100px ; Margin-left : 100px ; List-style : None ; Width : 156px ; /*  This width can be further explored. It does not contain the date length.  */ } # News: After { Content : '' ; Display : Block ; Clear : Both ; Height : 0px ;}# News Li { Clear : Both ; /*  Clear floating in Li  */ } # News Li { Float : Left ; /*  Title float left  */  Color : #333 ;Text-Decoration : None ; Font-size : 13px ; Max-Width : 156px ; /*  A maximum width for a standard browser  */  Height : 24px ; White-space : Nowrap! Important ; /* Force text not to wrap (standard browser)  */  White-space : Normal ; /*  Text line breaks when overflow occurs, and the text is cropped with the fixed height above.  */  Overflow : Hidden ; Text-Overflow : Ellipsis ; /*  Truncate text to show ellipsis (...)  */ -O-text-Overflow : Ellipsis ; /*  Attribute of special truncated text for opera  */  Background : None ; /*  Solve IE6's inexplicable height bug. Try to remove this attribute under IE6.  */ } # News Li A: hover { Color : #000 ; Text-Decoration : Underline ;} # News Li Span { Float : Left ; Color : #666 ; Padding-left : 10px ; Margin-Right : -99px ; _ Position : Relative ;}

This is basically the case for the pure CSS Method to Solve the Problem of text overflow and truncation.

however, this method has to face up to the problem, that is, its compatibility with Firefox. If any hero has a good solution, please leave a message.