文本换行:
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/ 《回车的传说》