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

转载 2011年03月10日 14:26:00

默认设置,一长串英文字符(中间没空格)不会自动换行,比 如: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  

 

另外解释一下

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 >   

 

运行以上代码,在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 >  

Html 解决长串英文字母显示不能自动换行

在会有纯英文或纯数字组成的文本,所以会把表单撑开.在中加入style="word-break:break-all;"使其换行....
  • maxracer
  • maxracer
  • 2010年12月28日 17:12
  • 10797

解决页面表格中长英文字符串不能自动换行的问题

有时候页面表格中内容太多,无奈怎么设置样式都调整不了,我只在表格内容全是英文的时候发现有这个问题,可以尝试通过下面的方法解决。 英文字母之间如果没有空格,系统认为这是一个单词,就不会自动...
  • qmyzch
  • qmyzch
  • 2016年11月02日 15:11
  • 1240

CSS强制不换行(white-space:nowrap)IE使用问题

什么情况下会出现换行:当元素设置了固定高度,并且文本长度大于标签元素的宽度时,文本会自动换行。css强制换行使用样式:white-space:nowrap;该样式从效果上是没有浏览器差异,使用该样式后...

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

转自:http://www.cnblogs.com/dudu837/archive/2012/03/06/2382257.html 关于强制不换行、强制换行的话题在网上已经被讨论...

CSS强制英文、中文换行与不换行 强制英文换行

1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:...

HTML数字和字母不换行

在HTML中标签中的数字和字母默认是不换行的,如果要将他们换行,在CSS中添加”word-wrap: break-word;” 默认normal : 允许内容顶开指定的容器边界 break-wo...

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

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

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

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

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

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

Android 文本框英文数字和汉字自动换行问题

Android 文字排版
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:英文字符和汉字自动换行和不换行的设置
举报原因:
原因补充:

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