日期:2014-5-17 浏览次数:20056次

弱问 一个 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>