使用<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. C 语言 习题 1-9

    练习1-9 编写一个将输入复制到输出的程序,并将其中连续的多个空格用一个空格代替. #include <stdio.h> int main(int argc, char const *ar ...

  2. 【POI 2010】反对称 Antisymmetry

    题目: 对于一个 $0/1$ 字符串,如果将这个字符串 $0$ 和 $1$ 取反后,再将整个串反过来和原串一样,就称作「反对称」字符串.比如 $00001111$ 和 $010101$ 就是反对称的, ...

  3. 收藏网址 jquery学习

    http://www.zhangxinxu.com/wordpress/2009/08/jquery-%E5%8D%95%E5%87%BB%E6%96%87%E5%AD%97%E6%88%96%E5% ...

  4. java基础-流

    大致列一下这个周末需要学习的内容 1 容器 2 线程 3 流 (本节内容) 一. 流 按方向-------------输入流输出流 按处理数据单位-----字节流字符流 按功能------------ ...

  5. 【bzoj3217】ALOEXT 替罪羊树套Trie树

    题目描述 taorunz平时最喜欢的东西就是可移动存储器了……只要看到别人的可移动存储器,他总是用尽一切办法把它里面的东西弄到手. 突然有一天,taorunz来到了一个密室,里面放着一排可移动存储器, ...

  6. 洛谷 [P3388] 割点模版

    tarjan 求无向图的割点 割点,即割去此点后原图可变为两个或多个独立的联通块 一个点 x 是割点,当且仅当存在一个x 的子节点 y ,使得 low[y] >= dfn[x] 对于根节点来说, ...

  7. CodeForces 605 E. Intergalaxy Trips

    E. Intergalaxy Trips time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...

  8. Vijos[1028]魔族密码

    风之子刚走进他的考场,就……花花:当当当当~~偶是魅力女皇——花花!!^^(华丽出场,礼炮,鲜花)风之子:我呕……(杀死人的眼神)快说题目!否则……-_-###花花:……咦~~好冷~~我们现在要解决的 ...

  9. EasyUI-Calendar

    EasyUI-Calendar 日历篇 Calendar也是页面中经常用到的元素,easyui也为们提供了日历的组件,效果如下图所示: 使用方法如下所示: <div class="ea ...

  10. 用正则表达式把页面中的px全部替换成rem

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...