读书人

弱问 一个 td 换行的有关问题

发布时间: 2012-10-18 13:46:56 作者: rapoo

弱问 一个 td 换行的问题
现有一个循环嵌套 外层遍历幢forEach 包着 tr, tr里面两个td

一个显示幢信息,后面一个显示户信息,但是 每幢的户信息 长度不一致,有的特别长,我想规定一行就显示几个,多个换行,该如何实现呢

Java code
<c:forEach items="${map}" var="item" ><tr class="tr_data1">   <td width=17% align="right">${item.key.broough}${item.key.road}${item.key.tabletNum}</td>   <c:forEach items="${item.value}" var="item1" >      <td colspan="2" style="word-wrap: break-word;word-break:break-all;">${item1.cellNum}单元${item1.floorNum}${item1.maproomNum}</td>   </c:forEach></tr></c:forEach>



正在赶项目,望高人指点一下,谢谢

[解决办法]
如果只是中文可以在表格的第一行的对应td中设置宽度,如果是一串很长的英文字符串就要在循环里面对应的td里面加上style="word-wrap: break-word",再设置个宽度就可以了
[解决办法]
楼主可以用js去控制,规定一行显示字符串的长度,当超过改长度,则加<br>换行,以下是模拟楼主所说的方法,希望对楼主有所帮助。
HTML code
<!DOCTYPE html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>test</title>    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>    <script  type="text/javascript">        window.onload = function(){            var value = ["mmmmmmmmmmmmmmmm","yyyyy","eeeeeeeeeeewwwwwwwwwwwwwweee","ss","ssssssssssssssssssssssssss"];            var r = document.getElementById("tab").rows.length;            for(var i = 0;i < r;i++){                for(var j = 0;j < document.getElementById("tab").rows[i].cells.length;j++){                    var v = value[parseInt(Math.random()*5)];                    //规定字符串长度为20,超过20自动换行                    if(v .length > 20){                        var vv = v.substring(0,20) + "<br>" + v.substring(20,v.length);                        document.getElementById("tab").rows[i].cells[j].innerHTML = vv;                    }else{                        document.getElementById("tab").rows[i].cells[j].innerHTML = v;                    }                }            }        }    </script></head><body>    <table border="1" id="tab">        <tr>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td></td>            <td></td>            <td></td>        </tr>    </table></body></html> 

读书人网 >CSS

热点推荐