使用<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. Ubuntu18.04安装docker、docker－compose、

    Ubuntu18.04下Docker CE安装 Docker版本分为两个:Docker Community Edition (CE)和 Docker Enterprise Edition (EE).D ...

  2. python 学习分享-函数篇

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函数,这 ...

  3. [19/02/23]ToolsShare 工具分享 VPNTethering Android (Root Required)

    To be short, VPN Tethering is a quite useful tool when you want to share your private network with s ...

  4. 聊聊、Java 命令 第一篇

    网上很多讲 Javac 和 Java 命令的,我觉得还是要自己写一写,做一个自己的总结,也方便以后查询. 开始之前先看看 help 命令,基本上任何一个软件都会提供这个命令. 没有什么比 -help ...

  5. 实用拜占庭容错算法PBFT

    实用拜占庭容错算法PBFT 实用拜占庭容错算法PBFT 96 乔延宏 2017.06.19 22:58* 字数 1699 阅读 4972评论 0喜欢 11 分布式架构遭遇的问题 分布式架构会遭遇到以下 ...

  6. [DM8168]Linux下控制GPIO实现LED流水灯

    首先加载驱动模块,应用程序通过调用API实现GPIO控制功能. 驱动程序: /* * fileName: led_gpio.c * just for LED GPIO test * GP1_14 -& ...

  7. [oldboy-django][2深入python] orm中auto_now =True, antu_now_add=True的应用

    DateTimeField.auto_now 这个参数的默认值为false,设置为true时,能够在保存该字段时,将其值设置为当前时间,并且每次修改model,都会自动更新.因此这个参数在需要存储“最 ...

  8. java面试需要准备什么呢？c++可以看看

    作者:Mingche Su链接:https://zhuanlan.zhihu.com/p/20545626来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 语言知识点:以 ...

  9. 微信小程序--问题汇总及详解之图片上传和地图

    地图用的是百度的地图,链接:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation 获取日期时间可以用小程序里自带的js文件 ...

  10. 【转】Unity5.x发布IOS项目Xcode8免签证调试发布教程

    http://www.jianshu.com/p/b0fb49fbcc14 最近尝试发布一下IOS项目,发现现在发布已经简单很多了,不需要开发者账户也能简单快捷进行真机调试. 调试: 1.准备工作①硬 ...