autoComplete与文本换行

文本换行:

 

1.word-break:

这是IE5+的专有属性,但在chrome下测试也有效。

总结:这个属性主要是控制一个单词的换行与否,涉及到亚洲语言。

normal:不解释;

break-all:针对欧美语言,将一个单词打断换行。

keep-all:针对亚洲语言,如中文,将中文一句话看作一个英文单词,只有在空格或者是标点的时候才换行。

 

2.word-wrap:

总结:基本和word-break的break-all相同,特殊在于它对标准浏览器也有效。

 

word-wrap:break-word和white-space:pre一起使用,word-wrap:break-word的表现生效.

所以可以用pre+word-break来实现IE6\7下的pre-wrap效果。

 

normal;

break-word;

 

3.white-space:

总结:用于处理空白符(例如换行符、空格符等)

 

normal 默认。清除空白,在边界换行。
pre 保留空白,到边界也不会换行。(IE6:表现一样)
nowrap 清除空白,到边界也不会换行。(IE6:表现一样)
pre-wrap 保留空白,在边界会换行。(<=IE7:不支持)
pre-line 清除空格符 但保留换行符,在边界换行。(<=IE7:不支持)
inherit 规定应该从父元素继承 white-space 属性的值。

 

需要注意的地方:

1.在IE6中,如果一行文本超过容器宽度,容器将被撑大。

2.在IE6中,如果背景图片大于容器大小,容器也会被撑大。所以说,针对IE6要注意加overflow:hidden;

 

autoComplete的一些记录:

 

1.给textarea和hiddenDiv 样式 font-family:Tahoma, 宋体没有任何作用。

 

2.jquery的 html(text) 方法在IE6中, 会除去text内的空格和换行符,然后才转换成html代码。而在chrome中是直接变成html,保留里面的空白符。

 

3.在IE6中一长串的空格符在遇到边界时会换行;chrome在空格遇到边界会停止在当前行,但是打出的空格符号会保留,直到打下一个非空白符才换行。

 

4.;nbsp&和普通空格是有一定区别的,待测试。

 

5.关于\n \r

1)在IE中,textarea文本域中打回车会生成\n和\r两个字符,而在FF和CHROME中只会生成一种\n。

2)用textarea.value来取值的话,一个回车会同时取到\r和\n两个字符,而jquery的val()方法就统一了浏览器的差异,IE和其它标准浏览器一样都只取一个\n。

 

参考:http://gmavkitx.blog.hexun.com/34162536_d.html

参考:http://lity0812.blog.163.com/blog/static/743594582010731114024768/    《回车的传说》

你可能感兴趣的:(word-break,white-space,word-wrap)