网站商铺格式问题 : style="word-wrap:break-word;table-layout: fixed;"

       最近总是有客户反映，网站商铺格式错乱，联系方式样式总被打乱，不知道是什么原因导致的形式严重变型，把我给折磨的，查看模板，模板没有问题，查看css也没有问题，格式使用的百分号，按理说就没有问题了，可是偏偏它就是给你捣乱。

      后来经过一番折腾，使用账号测试不同的商铺模板，一个一个的测试，终于，皇天不负有心人，我测试出了问题，问题是找到了，但新的问题又出现了，是table表单格式字符串太长导致的这个原因，如图：

根据情况，我搜索了一下，使用table-layout:fixed 属性,这里可以参考谷歌给出的详解：

table-layout:fixed 属性的解说

如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且中间无空格分隔的情况下)，以达到使过长的文字不撑破表格的目的，一般是使用样式：table-layout:fixed。但是在Firefox下面，会有一些问题，参考Gmail的一些做法，做了几个测试，得出一种解决办法。
例1：(IE浏览器)普通的情况

CODE:

<table border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：
可以看到width=80并没有起作用，表格被字符撑开了。

例2：(IE浏览器)使用样式table-layout:fixed

CODE:

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：
width=80起作用了，但是表格换行了。

 

 

例3：(IE浏览器)使用样式table-layout:fixed与nowrap

CODE:

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：width=80起作用了，换行也被干掉了。

 

例4：(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap

CODE:

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：不幸发生了，第一个td的nowrap不起作用了

 

例5：(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

CODE:

<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：改成百分比，终于搞定了

 

例6：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果：把例5放到firefox下面，又ft了

 

例7：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

CODE:

<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style><table class=tbl border=1 width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>

效果：天下终于太平了

 

例8：(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

CODE:

<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style>

CODE:

<table class=tbl border=1 width=80><tr><td width=20 class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>

效果：nowrap又不起作用了

但是使用它在不同浏览器中又会出现问题，显示效果整齐了，确显示内容被覆盖了，这又怎样解决呢，我又开始了搜索，可以强制换行，却又导致有的单词被分家了连不起来，后来有在表单格式中加了一句word-wrap:break-word，详细内容如下：

       word-wrap是控制换行的。

　　使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

　　break-word是控制是否断词的。

　　normal是默认情况，英文单词不被拆开。

　　break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。

　　keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

　　ie下：

　　使用word-wrap:break-word;所有的都正常。

　　ff下：

　　如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。

　　为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。

　　目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。

　　即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。

　　对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。

　　用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。

　　所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

　　word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。

     加这句话   style="word-wrap:break-word;table-layout: fixed;"，上面的问题就解决了。希望对大家有意!!!!!