Let text forms automatically adapt to the width (CSS)

Posted by john
11/15/2007
Related Tags:
div around div width  div width  Top Border Width  Right Border Width  Bottom Border Width  Left Border Width  Border Width  Width  Text Decoration  Text Transformation  Text Alignment  Text Indentation 

  <! DOCTYPE html PUBLIC "- / / w3c / / DTD HTML 4.0 Transitional / / EN"> 
<HTML>
<HEAD>
  <TITLE> New Document </ TITLE> 

  <style> ... 
  . Auto_arrange {...}{ table-layout: fixed) 
  . Auto_arrange td {...}{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 2px) 
  </ Style> 
  </ HEAD> 

<BODY>
  <table CellSpacing="0" cellpadding="1" width="100%" class="auto_arrange" border=1> 


<tr>
  <td> To text automatically adapt to the Width [Table to Table width automatically to text automatically adapt to the width [Table to Table width automatically to text automatically adapt Table width </ td> 
  <td Width="54"> (1 / 4) </ td> 
  </ Tr> 
<tr>
  <td> To text automatically adapt to the width [Table to Table width automatically to text automatically adapt to the width [Table to Table width automatically to text automatically adapt Table width </ td> 
  <td Width="54"> (2 / 4) </ td> 
  </ Tr> 
<tr>
  <td> To text automatically adapt to the width [Table to Table width automatically to text automatically adapt to the width [Table to Table width automatically to text automatically adapt Table width </ td> 
  <td Width="54"> (3 / 4) </ td> 
  </ Tr> 
<tr>
  <td> To text automatically adapt to the width [Table to Table width automatically to text automatically adapt to the width [Table to Table width automatically to text automatically adapt Table width </ td> 
  <td Width="54"> (4 / 4) </ td> 
  </ Tr> 

  </ Table> 
  </ BODY> 
  </ HTML> 

  The above example is the style used to achieve, text Table automatically adapt to the width, and it goes beyond the width of the text automatically hide.    IE below can also automatically appear ... the apostrophe. 

  Key style: 
  Table-layout: fixed fixed layout of the algorithm, forms filed by the default width of 100% (For IE, Mozilla) 
  Text-overflow: ellipsis overflow when the object within the text that appears when omitted markers Sort (For IE) 
  Overflow: hidden object size does not show more than the content (For IE, Mozilla) 
  White-space: nowrap mandatory in the same line Display all text, or until the end of the text object encountered br (For IE, Mozilla) 




Related articles:

Fireworks production desktop printer icon
  Let us first simple idea: We painted a thing before, you can observe the object structure.    For example, the printer, and the body shape is a cylinder of 1 / 4, and this part is the most basic part of the printer.    Therefore, we first painting of this fundamental part...
A comprehensive understanding of Google Web Directory
  Google Web directory features    Google combination of advanced Internet search technology and the 'Open Directory' breakdown, with the following characteristics:    Assessment of the importance of web site: Google's online directory is based on 'Open Di...
CSS alternative forms of the classic examples
  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html Xmlns=" http://www.w3.org/1999/xhtml "lang="gb2312">  <head>   <meta ...
Web Design Thinking (9) _ website font settings
  Hello everyone, Web Design Thoughts column today continues to Eighth.    When we last discussed the Home page layout and design of color combinations, today we have to talk about fonts.    ● fonts (Font) is the website set up production of a novice encountered difficultie...
Ajax ? (server)
  From Foundations of Ajax    Server-Side Frameworks    CPAINT    Sourceforge.net / projects / cpaint /    Cross-Platform Asynchronous Interface Toolkit implements Ajax on the server side by returning either text or DOM document objects to the client...