`

TABLE自动换行/支持中英文

    博客分类:
  • css
 
阅读更多

数字和英文的时候,TABLE中的TD就会被拉长.

解决方法是添加<td style=”word-break:break-all”>

用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象。总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了。

table{table-layout: fixed;}
td(word-break: break-all;  word-wrap:break-word;)

注释一下:
1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句(word-wrap:break-word;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行

===================================================================

tyle=”table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word”

如果你定义了单元格的宽度,不想宽度被内容撑大,用table-layout: fixed; 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 : 内容将在边界内换行。如果需要,词内换行也行发生

说明:

设置或检索当当前行超过指定容器的边界时是否断开转行。
对应的脚本特性为wordWrap 。请参阅我编写的其他书目。

语法:

table-layout : auto | fixed

参数:

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

========================================================

Ext.grid.GridPanel换行实现:

<style type=”text/css”>
.x-grid3-cell-inner{
word-break:break-all;
white-space:normal;
overflow:visible;
}
</style>

分享到:
评论

相关推荐

    html中表格td内容自动换行

    这将解决长串英文字母不能自动换行的问题和 TD 中汉字自动换行问题。 总结 在这里,我们讨论了如何使用 CSS 来控制 TD 中的换行。我们学习了强制不换行和强制换行的实现方法,并介绍了相关的属性和实例。

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

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

    表格自动换行主义CSS属性

    这是一段很长的文字,它会被自动换行,即使其中包含英文单词thisisaverylongwordthatwillbebroken.&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ``` 在这段代码中: - `table-layout:fixed;`:设置表格为固定布局模式,确保单元格的...

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

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

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

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

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

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

    CSS实现连续数字和英文的自动换行的方法

    对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行: html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义&lt;/...

    css之自动换行.pdf

    在CSS布局中,自动换行是一个常见的需求,特别是在处理文本内容时。文本可能会包含各种字符类型,如连续的数字、英文字符,甚至不同语言的文字。本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Fire...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    另外,对于表格的自动换行,可以使用`table-layout: fixed`属性来设定固定布局,这将根据表格的宽度、边框、间距和列宽来决定表格内容的布局,而不依赖于内容本身。这通常能提高表格渲染的速度。 在跨浏览器兼容性...

    css表格单元格中的长文本如何实现自动换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼。下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的...

    CSS控制文本自动换行的问题

    当我们在 CSS 中定义了这个样式时,表格中的字符就会自动换行,即使是连续的英文词或者一堆感叹号(!!!)。这可以避免网页被撑开,影响网页的布局和美观性。 2. `word-break: break-all; word-wrap: break-word;` ...

    jsp强行给表格换行

    ### JSP中实现表格自动换行的方法 在JSP(JavaServer Pages)开发过程中,经常需要将从数据库读取的数据填充到HTML表格中。当数据过长或格式复杂时,可能会遇到表格显示不正常的问题,比如文本溢出、布局错乱等。...

    css之自动换行.docx

    在CSS(层叠样式表)中,自动换行是一个关键的概念,它涉及到如何处理文本在容器内的布局,特别是在有限的空间内。本篇文章将深入探讨如何使用CSS来控制文本的换行,尤其是对于div、p这样的块级元素以及表格中的文本...

    css word-break word-wrap 前台显示自动换行

    在描述中提到的场景是在一个`table`元素中应用这些样式,以确保内容能够正确地自动换行。 1. **`word-wrap` 属性** - `word-wrap` 控制的是单词是否允许在边界处换行。默认情况下,英文单词不会被拆分,而中文则会...

    css之自动换行实现代码

    当我们遇到连续的英文字符和阿拉伯数字将容器撑大导致布局问题时,可以通过CSS中的特定属性来实现对文本的自动换行处理。 首先,对于常见的块级元素如`div`和`p`,正常文字的换行是通过CSS属性`white-space`来控制...

    对于div,p等块级元素css如何实现自动换行

    在网页设计和开发过程中,我们经常会遇到需要处理内容自动换行的情况,尤其是在块级元素如div、p等元素中的文本内容超过了设定的宽度后,自动换行的处理就显得尤为重要。本文将详细探讨如何通过CSS来实现块级元素...

    css实现连续的英文或数字自动换行的方法

    通过这些属性,可以实现连续的英文或数字在容器宽度不足时自动换行。 首先,对于div元素,在IE浏览器中,可以使用`white-space:normal;`和`word-break:break-all;`两个属性。`white-space:normal;`属性会使得空白符...

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

    在网页设计中,控制文字自动换行是一个常见而重要的需求。若不加以控制,较长的文字可能会溢出其容器,导致布局混乱或者用户体验不佳。CSS提供了多种方式来实现文字的自动换行。 首先,块级元素如`&lt;div&gt;`和`&lt;p&gt;`在...

    javascript 一个自定义长度的文本自动换行的函数

    很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形,虽然可以使用style=”table-layout:fixed;word-wrap:break-word;word-break:break-all” 来解决这个问题,但有些时候会导致...

Global site tag (gtag.js) - Google Analytics