`
wb1991wb
  • 浏览: 152406 次
  • 来自: 上海
社区版块
存档分类
最新评论

【转】防止<TD>变形

TD换行变形 
阅读更多

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

分享到：
| 【转】java常用排序算法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    setuptools-58.0.3.tar.gz

    Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    变压器DGA溶解气体数据（357组）

    包含六种故障类型： 中低温过热 高温过热 低能放电 高能放电 局部放电 正常 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111需要直接下载就可

    电抗器设计软件.zip

    电抗器设计软件

    base.apk

    base.apk

    SM4-CTS代码实现及基本补位示例代码

    代码参照openssl-3.3.0-alpha1，可独立运行。示例包含块加密，基本补位方式示例

    setuptools-60.3.0.tar.gz

    Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-59.4.0.tar.gz

    Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    永宏 PLC例程17个.zip

    永宏 PLC例程17个

    电器工程配料及预算软件.zip

    电器工程配料及预算软件

    基于CS通信的五子棋游戏GoBang.zip

    五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    python飞机大战Python_Airplane_War.zip

    五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    setuptools-66.1.1.tar.gz

    Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    飞机大战PlaneGame.zip

    五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    电气计算表格及小软件.zip

    电气计算表格及小软件

    ONNX模型转 TensorRT logging.h

    logging.h

    松下PLC例程55个.zip

    松下PLC例程55个

    setuptools-65.0.1.tar.gz

    Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    母亲节祝福html源码.pdf

    母亲节祝福html源码

    Theano-0.10.0b2.tar.gz

    Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    变压器铁心计算软件.zip

    变压器铁心计算软件

Magicbox
Global site tag (gtag.js) - Google Analytics