使用<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. PostgreSQL 安装完成后的一些配置

    设置数据目录,一般使用环境变量 PGDATA 指向数据目录的根目录.目录的初始化是使用 initdb 来完成的,-D 后面加上自定义目录的路径 initdb -D /tmp/testpostgres2 ...

  2. CSU-2049 象棋

    CSU-2049 象棋 Description 車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子.一天,小度在棋盘上摆起了许多車--他想知道,在一共N×M个点的矩形棋盘中摆最多 ...

  3. Android数据储存之SQLiteDatabase SQLiteOpenHelper类的简单使用

    SQLiteOpenHelper 简介: SQLiteOpenHelper是一个借口!所以不能直接实例化!那我们想要得到SQLiteOpenHelper对象就需要实现该接口!创建该接口的实现类对象! ...

  4. layer 体验

    做后端的,前端一直不擅长,提示语以前也只会alert,非常难看,后来在别人代码看到lay.msg() https://pan.baidu.com/s/1eRHH59g <!DOCTYPE htm ...

  5. eclipse中xml文件报错异常处理

    最近一个Javaweb工程中常出现xml文件的xsd验证失败信息,异常如下: <?xml version="1.0" encoding="UTF-8"?& ...

  6. mapserver+QGIS+openlayers的安装和配置

    1.下载MS4W,不要怀疑MS4W就是mapserver,只是里面集成了一些其他的工具和库,下载地址:http://www.maptools.org/ms4w/index.phtml?page=dow ...

  7. Sum of Squares of the Occurrence Counts解题报告（后缀自动机+LinkCutTree+线段树思想）

    题目描述 给定字符串\(S(|S|\le10^5)\),对其每个前缀求出如下的统计量: 对该字符串中的所有子串,统计其出现的次数,求其平方和. Sample Input: aaa Sample Out ...

  8. POJ 1815 Friendship（字典序最小的最小割）

    Friendship Time Limit: 2000MS   Memory Limit: 20000K Total Submissions: 10744   Accepted: 2984 Descr ...

  9. 二叉树节点个数，叶子个数，第K层个数，最低公共节点

    1. 节点个数 function getNodeNum(root){ if(root == null){ return 0; } //+1为root的计数 return getNodeNum(root ...

  10. Dinic 网络流

    写个博客贴板子-- inline void add_edge(int x,int y,int z){ e[++tot].x=y,e[tot].cap=z; e[tot].next=h[x],h[x]= ...