使用<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. Wordpress 作者模板页中的自定义帖子类型分页问题

    <?php // 获取当前页面的页数,函数的参数为 paged $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $ ...

  2. Java学习2

    final在修饰类时,并不限制用户修改对象包含的变量值,只是限制了对象的主转移,只能针对某一个对象进行操作,中途不可更改对象. 重写父类的方法 重写(Override)和重载(Overload)都是针 ...

  3. PAT1021

    给定一个k位整数N = dk-1*10k-1 + ... + d1*101 + d0 (0<=di<=9, i=0,...,k-1, dk-1>0),请编写程序统计每种不同的个位数字 ...

  4. 【bzoj1095】[ZJOI2007]Hide 捉迷藏 动态点分治+堆

    题目描述 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这 ...

  5. log4j配置信息

    #INFO的日志信息输出到stdout和R这两个目的地,stdout和R的定义在下面的代码,可以任意起名.等级可分为OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALLlog4j.r ...

  6. PHP算法面试题目

    1.使用PHP描述冒泡排序和快速排序算法,对象可以是一个数组 //冒泡排序(数组排序) functionbubble_sort($array){       $count = count($array ...

  7. Manthan, Codefest 16 B 数学

    B. A Trivial Problem time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  8. PE

    不是projecteuler,我想说的是projecteuclid..似乎是一个有很多数学文献的网站..? PE541似乎是一道很有趣的题目,有一个暴力大概就是首先转化一下模型变成找\(\sum_{x ...

  9. 从零开始实现放置游戏（六）——实现挂机战斗（4）导入Excel数值配置

    前面我们已经实现了在后台管理系统中,对配置数据的增删查改.但每次添加只能添加一条数据,实际生产中,大量数据通过手工一条一条添加不太现实.本章我们就实现通过Excel导入配置数据的功能.这里我们还是以地 ...

  10. 【转】linux之shfit

    位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...