使用<table> 进行页面开发，会遇到字符串很长将table撑开变形的问题，在网上搜了一些，终于找到 一个比较好用的解决方法。贴出来，方便以后使用。在table标签中加入如下的style就行了。
<table border="0"
cellspacing="0" cellpadding="0" width="200" align="center"
style="table-layout:fixed;word-wrap:break-word;word-break:break-all">
很简单,加一个style ..
<td style="word-wrap:break-word:"
width="160">aaaaaabbbbcccdddeeffesfsdffdfdsfsdfasdfasdfasfadfadf</td>
这样就不会让table撑破了!
<table
width="100%" border="0" cellspacing="0" cellpadding="0"
style="table-layout:fixed;word-break:break-all"><tr>
<td
style="word-wrap:break-word;word-break:break-all">xxx</td></tr></table>
1.
单元格自动换行
只要在table属性中写上style="table-layout: fixed"即可，如下
<table
width="80%" height="166" border="0" style="table-layout:
fixed">
表格就实现了单元格的压缩.但会对单元格内的文字显示不全.
2可以解决这个问题.
2.对单元格的控制.
<td width="50%"
style="word-wrap: break-word;">
不换行 简单些td中加white-space:
nowrap;就行了
换行如下：
<table style="table-layout:fixed;"
width='100%'>
<tr>
<td width=50>asdasd</td>
<td
width="100%" style="word-wrap : break-word;word-break: break-all;
overflow:hidden;
">abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
在Table中加入如下样式：
style="table-layout:
fixed;WORD-BREAK: break-all; WORD-WRAP:
break-word"
在默认情况下网页是不会自动换行的，如果字符很长的话，就会
使网页变型，因为它是通过绝对长度来控制的，我们在实际使用
中可是不想让它这样，其实只要在表格控制中添加一句
<td
style="word-break:break-all">就搞定了。
下面是一段示范的代码：
<body>
<table
width="100" border="0"><!-- 控制表格的长度来换行 -->
<tr>
<td
width="628" style="word-break:break-all">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>
</tr>
</table>
</body>
在用表格做网页排版的时候，有时会碰到一段连续的英文词或者连续的标点号，会出现把网页就撑开的现象。
可以用css强制换行：
<table
style="table-layout: fixed;" >
<tr>
<td style="word-break:
break-all;
word-wrap:break-word;">abcdefghtiasdhjkasdha<td>
</tr>
</table>
table-layout:
fixed 可以让表格中有连续的标点号之类的字符时自动换行
word-break: break-all; word-wrap:break-word
此样式可以让表格中的一些连续的英文单词自动换行
<table width="100"
border="0"><!-- 控制表格的长度来换行 -->
<tr>
<td width="100"
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
>
RippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRipple
</td>
</tr>
</table>
<table
width="100%" border="0" cellspacing="0" cellpadding="0"
style="table-layout:fixed;word-break:break-all"><tr>
<td
style="word-wrap:break-word;word-break:break-all">xxx</td></tr></table>
1. java 版
//以空格为分割符，将长字符串分段， 末段小于2个字符的合并到前一个段
private static String cutLongWord(String longWord) {
int
wordNumber=5;
if (Report.isEmpty(longWord)) {
return longWord;
}
StringBuilder cutWord = new
StringBuilder();
if (NumberUtils.isNumber(longWord)) {
BigDecimal big = new BigDecimal(longWord);
String
tempLongWord = big.setScale(1, BigDecimal.ROUND_HALF_UP).toString();
longWord = tempLongWord.length() - 2 > longWord.length() ?
tempLongWord : longWord;
while (longWord.length() >
wordNumber) {
cutWord.append(" " + longWord.substring(0,
wordNumber));
longWord = longWord.substring(wordNumber,
longWord.length());
}
if (cutWord.length() ==
0 || longWord.length() > 2)
cutWord.append(" ");
cutWord.append(longWord);
return
cutWord.substring(1, cutWord.length());
} else {
String[] words = longWord.split(" ");
for (String word : words)
{
if (word.length() <= wordNumber) {
cutWord.append(" " + word);
continue;
}
while (word.length() > wordNumber) {
cutWord.append(" " + word.substring(0, wordNumber));
word = word.substring(wordNumber, word.length());
}
// If the length of the last string is less than 3,
merge it to
// last but one.
if
(word.length() > 2)
cutWord.append(" ");
cutWord.append(word);
}
return
cutWord.substring(1, cutWord.length());
}
}
2. js版
<script
type="text/javascript">
// <![CDATA[
function
toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all)
toBreakWord(37);
// ]]>
</script>
<table border="0"
cellpadding="0" cellspacing="0">
<tr>
<td
nowrap>
<span style="text-overflow: ellipsis; overflow-x: hidden;
300px;">水果拼盘：西瓜、苹果、哈密瓜，或者任何别的什么</span>
</td>
</tr>
</table>
<td
nowrap>
<div title='<%# Eval("Context") %>'
style="text-overflow: ellipsis; overflow-x: hidden; 120px;">
<%# Eval("Context")%>
</div>
</td>
加个css就能搞定，你的意思是先把td固定住，然后输入的内容td装不下了就变成...是吧！
把这个加到你的css文件里 .ctltable{ border-collapse: collapse; table-layout:fixed}
.ctltable td { text-overflow:ellipsis; overflow:hidden; white-space: nowrap;
padding:2px} ctltable加在table上就可以了 <table class="ctltable">