使用<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">

td中内容自动换行的更多相关文章

  1. table表格td内内容自动换行

    项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...

  2. 设置table中的td一连串内容自动换行

    遇到一长串字母撑出了td宽度,导致整个表格错乱,如图: , 解决办法: 第一: table 加上css: table-layout: fixed;(此css属性 表示 列宽由表格宽度和列宽度设定.不会 ...

  3. html-div中内容自动换行

    <div style='width: 100px;display:block;word-break: break-all;word-wrap: break-word;'> 内容超出div宽 ...

  4. 怎样让HTML 表格中内容自动换行？？

    <table style="word-break:break-all; word-wrap:break-all;">

  5. Table里td中的文本过长，设置不换行，随内容同行显示(转载)

    当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap   就可以解决排版问题啦 <td style="white ...

  6. css中设置table中的td内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  7. td中的值自动换行

    设置td中的值自动换行在<td ></td> 中加上这样一句代码,可以简省设置,使长字符串换行.而不用设置width,height. style="word-wrap ...

  8. <td style="word-break:break-all"> 在html中控制自动换行

    在html中控制自动换行   其实只要在表格控制中添加一句 <td style="word-break:break-all">就搞定了. 其中可能对英文换行可能会分开一 ...

  9. div中内容超出自动换行

    下面以table中td的内容超出为例说明: 首先: td { display: block; } 然后:给td设置css样式: 1.  td { word-wrap: break-word; } 2. ...

随机推荐

  1. 【LoadRunner】场景执行报错“failed: WSA_IO_PENDING”

    问题:性能测试场景执行报“failed: WSA_IO_PENDING”错误 解决方法: 添加web_set_sockets_option("OVERLAPPED_SEND", & ...

  2. 数据结构设计 Stack Queue

    之前在简书上初步总结过几个有关栈和队列的数据结构设计的题目.http://www.jianshu.com/p/d43f93661631 1.线性数据结构 Array Stack Queue Hash ...

  3. 菜鸟之路——机器学习之Kmeans聚类个人理解及Python实现

    一些概念 相关系数:衡量两组数据相关性 决定系数:(R2值)大概意思就是这个回归方程能解释百分之多少的真实值. Kmeans聚类大致就是选择K个中心点.不断遍历更新中心点的位置.离哪个中心点近就属于哪 ...

  4. [已解决]Argument list too long如何处理？

    Argument list too long 本质是需要处理的长度超过系统的长度,因此无法执行相关命令. 经过搜索发现了两种方法,思想都是将参数切分成小的段落进行执行. 法一:通过xargs传递参数 ...

  5. Summary—【base】(CSS)

    CSS知识点 1. CSS又被称为层叠样式表 2. CSS在html中的语法 a) <style> 选择器{键:值;} </style> b) css中最后一个键值可以不写分号 ...

  6. NSURLSession使用模板和AFNetworking使用模板（REST风格）

    1.NSURLSession使用模板 NSURLSession是苹果ios7后提供的api,用来替换 NSURLConnection会话指的是程序和服务器的通信对象//一.简单会话不可以配合会话(ge ...

  7. BZOJ 4326：NOIP2015 运输计划（二分+差分+lca）

    NOIP2015 运输计划Description公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所 ...

  8. [SPOJ839]Optimal Marks

    [SPOJ839]Optimal Marks 试题描述 You are given an undirected graph \(G(V, E)\). Each vertex has a mark wh ...

  9. Testlink集成Jira时如果出现Error咋办？

    TestLink在用SOAP集成Jira时,如果出现: SOAP Fault: (code: WSDL, string: SOAP-ERROR: Parsing WSDL: Couldn't load ...

  10. HDU5006 Resistance(高斯消元)

    给你一个复杂的网路图,然后告诉你s,t,求s,t的等效电阻.方法是设s的电势为1,t的电势为0.然后对于其它的每个点x,满足的是sigma(ux-uy)/R(x,y)(即对每个与x相连的节点y,电势差 ...