`
anna_zr
  • 浏览: 200490 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

(转)关于table内文字换行

阅读更多
本文转自“老紫竹”的http://www.java2000.net/viewthread.jsp?tid=68


解决文字过长,表格被撑大,自动换行,文字超出,切割
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
语法: 
word-break : normal | break-all | keep-all 

参数: 
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 

语法:
word-wrap : normal | break-word 

参数:
normal :  允许内容顶开指定的容器边界
break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生

说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。

语法:
table-layout : auto | fixed 

参数:
auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

说明:
设置或检索表格的布局算法。 
-------------------------------------------------
以上只能解决IE的问题,这里FF中我们使用JS插入的方法来解决

<!DOCTYPE html UBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" c />
<style type="text/css">
<!-- 
div {
  width:300px;
  word-wrap:break-word;
  border:1px solid red;
  }
-->
</style>


<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<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>


需要注意一点,在css或者<table>里面千万不要设置 height属性,否则文字会被切割,超出的部分不显示了
分享到:
评论

相关推荐

    jsp页面Table自动换行

    `可以使单元格内的内容在单词边界处换行,避免溢出。`table-layout: fixed;`可以让表格根据预先设定的列宽分配空间,避免内容过长导致的换行。 3. **Linux命令**:如`ls`用于列出目录内容,`cd`用于切换目录,`grep...

    html中表格td内容自动换行

    如果我们为 TD 指定了宽度,并且文字中有标点或空格,可以在文字与 TD 之间套一层 DIV 加以解决。 强制换行 强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaaaaa)时不撑大布局。我们可以使用 `word-...

    layui-table自动换行.txt

    使用layu数据表格i的时候,文字太多会使用……代替,用户体验不好,只需要在页面中增加几行样式文件即可解决。

    itext将静态html转pdf 中文显示及换行问题

    注意:此代码是利用itext将静态html转为pdf,非url转pdf 项目为maven项目,注意pom.xml文件中的jar包 解决了中文不显示及不换行的问题 https://blog.csdn.net/woweipingzui/article/details/82017089

    layui-table固定列自动换行.txt

    layui数据表格自动换行,当设置固定列时,会出现行高不一致的问题,用户体验不好,只需要在页面中增加几行代码即可解决。

    td 内容自动换行 table表格td设置宽度后文字太多自动换行

    为了实现内容的自动换行,我们需要对table和td进行相应的样式设置。 首先,为了让表格的宽度固定,可以使用CSS属性`table-layout: fixed;`。这个属性用于定义表格宽度的计算方式。当设置为`fixed`时,表格的宽度由...

    html转pdf,ITEXT转HTML为PDF解决中文不换行问题

    1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="&lt;style&gt;"; css +="table{"; ...

    IText html转pdf 解决中文自动换行问题

    1、解决HTML转pdf 中文、数字、英文不能换行的问题,修改的源码包 重新计算了右边距。 2、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502

    表格自动换行主义CSS属性

    我们可以看出,合理利用`table-layout`、`word-break`和`word-wrap`等CSS属性,能够有效改善表格内文本的显示效果,尤其是在需要处理大量文本数据的情况下,自动换行的功能尤为重要。这对于提升用户体验和美化页面...

    CSS 文字自动换行

    ### CSS文字自动换行 #### 知识点一:CSS自动换行的原理与方法 在Web开发中,实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器...

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    在网页设计中,经常需要处理表格(table)的布局问题,特别是当单元格(cell)内的文本内容过长时,如何保持单元格的固定宽度,不让内容换行,并在显示不下的情况下添加省略号("...")表示内容被截断。这涉及到CSS...

    IText Html生成PDF支持中文、英文和数字换行

    经过大牛修改后的core-renderer.jar,当把HTML转化成PDF时支持table的td中的中文、英文和数字自动换行,table必须添加样式table-layout:fixed;word-break:break-strict;

    Html转pdf 解决中文、数字、英文换行问题

    解决HTML转pdf 中文、数字、英文不能换行的问题,修改的源码包 重新计算了右边距

    itext生成pdf解决中英文换行问题

    导入 &lt;groupId&gt;org.xhtmlrenderer &lt;artifactId&gt;core-renderer &lt;version&gt;R8 直接根目录下新建包org.xhtmlrenderer.layout 覆盖jar

    设置QTableView的内容自动换行,代理方式

    需要注意的是,这个例子仅处理了文字换行,如果单元格包含其他复杂的元素,如图像或自定义的格式,可能需要进一步扩展`paint()`方法。同时,为了适应不同大小的单元格,可能需要根据`QTableView`的列宽调整行宽的...

    CSS自动换行

    对于复杂的布局结构,如表格或卡片式布局,可以利用`table`元素的特性实现自动换行: 1. **固定列宽(IE)** - 通过设置`table-layout: fixed;`属性,可以让表格中的列宽固定,从而强制文本在到达边界时换行。 -...

    FastReport自动换行及行高自适应

    在设计报表时,我们经常遇到需要处理长文本自动换行以及行高自适应的问题,以便于在有限的页面空间内展示更多的信息。本文将详细讲解如何在FastReport中实现这两个功能。 首先,我们要理解自动换行的两种方法: 1....

    css控制文字自动换行的实现方法

    以上内容详细介绍了CSS中关于如何控制文字自动换行的几种实现方法,这在网页布局和排版中非常关键,能够帮助开发者更加精确地控制页面的显示效果,提升用户体验。在实际应用中,需要结合不同浏览器的兼容性来选择...

Global site tag (gtag.js) - Google Analytics