js 判断文字是否破行

日前有这样一个需求，本来是想在div里面嵌个span，再看span的长度是否大于父div长度，如果大于，则破行。

但是发现在IE8－IE10的浏览器不行，后来发现

IE8以后，IE对offsetWidth，scrollWidth的属性发生了变化，只表示看到的部分

比如如果一个div display:none的话，那offsetWidth会是0，scrollWidth一样，如果span的父div宽度为100，overflow:hidden,则span里面不管写多少字宽度都不会超过100，

如果css设置了text-overflow:ellipsis;那span里面的字如果很多，那span里面的offsetWidth则会是80，83或81 ，可悲的是IE8，IE9，IE10都不一样。

而在chormal里面

offsetWidth是指理论长度，就是不管看见看不见，都会从理论上算计其长度，如果span里面的字很多，不管有没有隐藏，offsetWidth的值都是一样的。

在jquery里面的width()方法中，如果是IE的话，如果是隐藏的话，他会修改成显示，求出长度，再去隐藏。

但是，如果像我前面说的，父容器被overflow:hidden的话，width（）也只能返回可视长度。

所以，如果要判断文字是否破行的话，首先要把容器里面的文字复制出来，放到另一个容器中，再比较两个窗口的长度，如果后者大于前者，刚破行。

代码如下

<div id="a" style="width:100px;border:solid 1px; text-overflow:ellipsis;overflow:hidden;
        white-space:nowrap;">枯在在枯厅dsdfffff</div>

 <div style="display:none" id="kkk"></div>

<script>
    window.onload = function () {


        $("#a").width();
        $("#kkk").text($("#a").text());
        if ($("#kkk").width() >= $("#a").width()) {
            $("#a").toggle( function () {
                $(this).css("white-space", "normal");
            }, function () {
                $(this).css("white-space", "nowrap");
            });
        }
    }
</script>

另外,td里面做换行,table一定要设置相关属性才行