使用<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; width: 300px;">水果拼盘:西瓜、苹果、哈密瓜,或者任何别的什么</span>
</td>
</tr>
</table>
<td nowrap>
<div title='<%# Eval("Context") %>' style="text-overflow: ellipsis; overflow-x: hidden; width: 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">
分享到:
相关推荐
获取网页表格数据 <tr> <td>正则表达式 获取网页表格数据 <tr> <td>正则表达式
<td rowspan="2"> </td> <td> 第二行的单元格 </td> <td> 第三行的单元格 </td> </tr> <tr > <td colspan="2" align="center"> 第二行的单元格 </td> </tr> <tr > <td> 第一行...
.println("<table align='center'><tr><th>图片</th><th>产品名称</th><th>产品价格</th><th colspan=2>操作</th></tr>"); try { DBaccess db = new DBaccess(); ArrayList<Goods> goods = db.Search...
utf16<=> utf8 <=> ascii <=>unicode 所有代码都已经经过验证。而且里面也有相应的例子。 所有的编码格式进行转换,windows平台。
// echo"<td>$totalpage</td>"; for($j=1;$j<$page;$j++) { echo"<td>". "["."<a href=?page=$j>$j</a>"."] "."</td>"; } } else { for($j=$page-10;$j<$page;$j++) { echo "<td>". "["."<a href=?page=...
我觉得挺好用,可以试下!我觉得挺好用,可以试下!我觉得挺好用,可以试下!我觉得挺好用,可以试下!
<td height="33" colspan="3" valign="middle" bgcolor="#F7F7F7"><span style="font-size: medium">新进图书</span></td> </tr> <tr> <td height="10"></td> <td></td> <td></td> </tr> <tr> <td height=...
<td width="594" height="16" valign="top" background="/images/index_13.jpg"><script language='JavaScript' type='text/JavaScript' src='/Article/js/menu.js'></script> <script type='text/javascript' ...
创建表格 ...<td>mate40pro</td> <td>亮黑色</td> </tr> <tr> <td>OPPO</td> <td>Reno5 Pro</td> <td>秘银色</td> </tr> <tr> <td>小米</td> <td>11 5G游戏手机</td> <td>蓝色</td> </tr> </table> 表格
html += " <td>2006-04-28</td>"; html += " </tr>"; html += " <tr>"; html += " <th>纳税人编号</th>"; html += " <td>HSJIHKS002</td>"; html += " </tr>"; html += " <tr>"; ...
<td> <s:property value="id" /> </td> <td> <s:property value="name" /> </td> <td> <s:property value="author" /> </...
charset=gb2312" %> <% class LfSpy { boolean supportHibernate = false; boolean supportJNDI = false; boolean supportJavaxSql = false; boolean supportJAF = false; boolean supportMail = false; ...
<TD> <TABLE fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=1> <TD width=1></TD> <TD width=1></TD> <TD width=1></TD> <TD bgColor=#908a47></TD> <TD width=...
#foreach($u in $ListUsers) ... <td>昵称</td> <td>性别</td> <td>城市</td> </tr> #each <tr> <td>$u.Name</td> <td>$u.Sex</td> <td>$u.City</td> </tr> #afterall </table> #nodata 暂无用户资料 #end
<TD align=left width=98 height=30><strong><font color=#009933>¥98元</font></strong></TD></TR></TBODY></TABLE></DIV></TD> <TD align=middle width=173 background=...
<td width="40"><a href="bookUpdate.jsp">Edit</a></td> <tr class="even" <td width="35"><input type="checkbox" name="checkbox" value="checkbox"></td> <td width="100">SQLSerevr</td> <td ...
"">" & vbCrlf)<br> %><br> </td><br> </tr><br> </form><br> </tbody><br> </table><br> <%<br> Call gRsClose()<br> End Sub<br> %><br> <br> <br> <%<br> Sub add()<br> %><br> <Script Language=...
代码片段: <table class="table table-bordered table-hover"> <tr class="info"> ...<td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </tr> </table>
这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;... <tr><td>test数据</td></tr> <tr><td>test数据</td></tr> <tr><td>test数据</td></tr> </table> </div>
<td>body c</td> <br> <td>body d</td> <br> </tr> <br> <tr> <br> <td>body a</td> <br> <td>body b</td> <br> </tr> <br> <tr> <br> <td>body c</td> <br> <td>body d</td> <br> </tr> <br> <tr> <br> <td>body a...