表格自动换行

style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"

如果你定义了单元格的宽度,不想宽度被内容撑大,用table-layout: fixed; WORD-WRAP: break-word;

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 (到了换行的地方,什么字都直接断开)
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 (为了换行,把非亚洲语言文本断开)
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 (如果不想英语单词被分开,用这个,上面两个都是会直接把单词断开的)



语法:
 
word-wrap : normal | break-word
 
参数:
 
normal :  允许内容顶开指定的容器边界
break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生
 
说明:
 
设置或检索当当前行超过指定容器的边界时是否断开转行。
对应的脚本特性为wordWrap。请参阅我编写的其他书目。

 

语法:
 
table-layout : auto | fixed
 
参数:
 
auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关
 
说明:
 
设置或检索表格的布局算法。
对应的脚本特性为tableLayout

 =======================
但是 现在有个问题,有时候需要自动换行,但是不希望把一个英文单词分成2行,那么怎么办呢,其实默认的时候中文英文都会自动换行的,对于英文不能换行的问题是 因为英文连在一起了,比如空格用 形成这个的字符串english    english english english此时就不能执行自动换行的功能了,如果此时的  换成空格" "就可以自动换行
现在问题就好办了,只要替换" "为" "就可以,但是现在有个问题浏览器一般来说会把多个" "看成一个 " "所以我们只需要换个 就可以了,否则的话原来的排版可能会出现问题,因此我用正则表达式替换 在字母前面的一个空白" "来实现此功能
实现方法如下
str.replace(/ (?=/w)/ig," ");
就这么简单,现在测试英文会自动换行,而且不会被强行截断了
总结
在宽度固定的情况下,默认时中英文都可以自动换行的
而有时英文不能自动换行的原因是因为有 变成空白的原因
浏览器不把 看出单词的分界符号,所以不换行,用替换一个 为空白的方法可以实现原来的功能

具体js函数如下

aa="english   english english english"
document.write(aa);
document.write("
");
function get_blank(str){
return str.replace(/ (?=/w)/ig," ");
}
document.write(get_blank(aa))

可以看出一般情况下,两个输出完全一致,而有表格的情况下,第二个输出会自动换行

你可能感兴趣的:(HTML相关,语言,算法,正则表达式,javascript,浏览器,脚本)