英文字符和汉字自动换行和不换行的设置(个人收藏)

转载 2014年02月19日 09:59:32

默认设置,一长串英文字符(中间没空格)不会自动换行,比 如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,而汉字字符却可以自动换行。原因 是:英文字母之间如果没有空格,系统认为是一个单词,就不会自动换行。汉字就没有这种情况。

1、在需要强制设置换行时,

td中:

需用css来控制style='word-break: break-all'

div中 :  

div 实现长英文字母自动换行CSS

IE浏览器
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

Firefox浏览器
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }


2、在不需要换行时

style='word-break: keep-all'//不会自动换行,有空格换行,ie支持,ff不支持

要想兼容ie和ff,需设置white-space: nowrap;,这样设置,不论是英文还是汉字,也不管是否有空格都会不换行显示

Css代码  收藏代码
  1. white-space : normal | pre | nowrap   
  2.   
  3. normal  :  默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行   
  4.   
  5. pre     :  换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为   
  6.             standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode,  
  7.             此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象  
  8.    
  9. nowrap  :  强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。  
  10.   
  11. 兼容性: IE5.5 +,  Firefox  
  1. white-space : normal | pre | nowrap   
  2.   
  3. normal  :  默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行   
  4.   
  5. pre     :  换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为   
  6.             standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode,  
  7.             此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象  
  8.    
  9. nowrap  :  强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。  
  10.   
  11. 兼容性: IE5.5+,  Firefox  

另外解释一下

word-wrap和word-break
word-wrap用来控制换行
两种取值:
(1)normal
(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。) 
word-break用来控制断词
三种取值:
(1)normal
(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
(3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

另外可参照以下文章

兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行


关于 overflow: hidden;的说明

即使通过css控制了td横向字体隐藏截取,而纵向遇到<br>的情况还是会撑开单元格的高度,ie9好像支持这种效果,而不会撑开单元格的高度

Html代码  收藏代码
  1. < style   type = "text/css" >   
  2. .x-grid-body {  
  3.     table-layout: fixed;  
  4. }  
  5. .x-grid-body td {  
  6.     overflow: hidden;  
  7.     border: 1px #dcdcdc dotted;  
  8.     border-width: 1px;  
  9.     word-break: keep-all;  
  10.     white-space: nowrap;  
  11. }  
  12. </ style >   
  13.   
  14. < table    cellspacing = "0"   cellpadding = "0"    class  =  "x-grid-body"    style  = "width:150px;" >   
  15.     < tr >   
  16.         < td >   
  17.             1  
  18.         </ td >   
  19.           
  20.         < td   style  =  "width:100px;height:20px;" >      
  21.               11111111111111111111111111111111111111111111  
  22.               < br >   
  23.               2222222222222222222  
  24.               < br >   
  25.               33333333333333333333  
  26.               < br >   
  27.               33333333333333333333  
  28.               < br >   
  29.         </ td >   
  30.     </ tr >   
  31. </ table >   
[html] view plaincopy
  1. <style type="text/css">  
  2. .x-grid-body {  
  3.     table-layout: fixed;  
  4. }  
  5. .x-grid-body td {  
  6.     overflow: hidden;  
  7.     border: 1px #dcdcdc dotted;  
  8.     border-width: 1px;  
  9.     word-break: keep-all;  
  10.     white-space: nowrap;  
  11. }  
  12. </style>  
  13.   
  14. <table  cellspacing="0" cellpadding="0"  class = "x-grid-body"  style = "width:150px;">  
  15.     <tr>  
  16.         <td>  
  17.             1  
  18.         </td>  
  19.           
  20.         <td style = "width:100px;height:20px;">     
  21.               11111111111111111111111111111111111111111111  
  22.               <br>  
  23.               2222222222222222222  
  24.               <br>  
  25.               33333333333333333333  
  26.               <br>  
  27.               33333333333333333333  
  28.               <br>  
  29.         </td>  
  30.     </tr>  
  31. </table>  

运行以上代码,在ie和ff中横向会隐藏显示,而纵向只有在ie9中才会隐藏

解决以上问题,只需在td中加上div即可实现ie和ff都支持

Html代码  收藏代码
  1. < style   type = "text/css" >   
  2. .x-grid-body {  
  3.     table-layout: fixed;  
  4. }  
  5. .x-grid-body td {  
  6.     overflow: hidden;  
  7.     border: 1px #dcdcdc dotted;  
  8.     border-width: 1px;  
  9.     word-break: keep-all;  
  10.     white-space: nowrap;  
  11. }  
  12. </ style >   
  13.   
  14. < table    cellspacing = "0"   cellpadding = "0"    class  =  "x-grid-body"   style  = "width:150px;" >   
  15.     < tr >   
  16.         < td >   
  17.             1  
  18.         </ td >   
  19.           
  20.         < td   style  =  "width:100px;height:20px;" >      
  21.         < div   style  =  "height:20px;" >   
  22.               11111111111111111111111111111111111111111111  
  23.               < br >   
  24.               2222222222222222222  
  25.               < br >   
  26.               33333333333333333333  
  27.               < br >   
  28.               33333333333333333333  
  29.               < br >   
  30.          </ div >   
  31.         </ td >   
  32.     </ tr >   
  33. </ table >   

相关文章推荐

解决span中的内容不换行

span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;over...

英文字符和汉字自动换行和不换行的设置

默认设置,一长串英文字符(中间没空格)不会自动换行,比 如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,而汉字字符却可以自动换行。原...

解决长串英文字母显示不能自动换行的问题和td中汉字自动换行 && CSS强制不换行

例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,将表格伸的很长很长,而汉字字符却可以自动换行。 原因是: 英文字母之间如...

关于在html中数字和英文不换行的解决方法

字符换行 table,td,th,div { border:1px green solid;} code { font-family:"Courier New", Cou...

css强制html不换行 css强制英文单词断行

css强制html不换行 css强制英文单词断行 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word...

word中设置英文单词按字符换行

 问题: 在word中输入比较长的英文单词,如果单词超过了行尾,则会自动换行,这样就形成了上一行剩下的字数很少,如果是两段对齐,则字符间距会变大;如果左对齐,则会出现右边空出一大行。 ...

Myeclipse格式化不换行的设置

代码风格上的个人习惯小Tips
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)