弱问 一个 td 换行的有关问题
日期：2014-05-17 浏览次数：20811 次
弱问 一个 td 换行的问题
现有一个循环嵌套 外层遍历幢forEach 包着 tr， tr里面两个td
一个显示幢信息，后面一个显示户信息，但是 每幢的户信息 长度不一致，有的特别长，我想规定一行就显示几个，多个换行，该如何实现呢
正在赶项目，望高人指点一下，谢谢
------解决方案--------------------
如果只是中文可以在表格的第一行的对应td中设置宽度，如果是一串很长的英文字符串就要在循环里面对应的td里面加上style="word-wrap: break-word"，再设置个宽度就可以了
------解决方案--------------------
楼主可以用js去控制，规定一行显示字符串的长度，当超过改长度，则加<br>换行，以下是模拟楼主所说的方法，希望对楼主有所帮助。
现有一个循环嵌套 外层遍历幢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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
