`

html表格自动换行

    博客分类:
  • HTML
阅读更多
用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:(
总结了一下,只要在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;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。

语法:

word-break : normal | break-all | keep-all

参数:

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


语法:

word-wrap : normal | break-word

参数:

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

说明:

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



语法:

table-layout : auto | fixed

参数:

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

说明:

设置或检索表格的布局算法。
对应的脚本特性为tableLayout。
分享到:
评论

相关推荐

    html中表格td内容自动换行

    HTML 中表格 TD 内容自动换行 HTML 中让表格 TD 中的多余字体自动换行是前端开发中常见的问题。今天,我们将讨论如何使用 CSS 来控制 TD 中的换行。 强制不换行 在 IE 的 TD 中,如果我们没有指定宽度,使用 `...

    表格自动换行主义CSS属性

    ### 表格自动换行与CSS属性详解 #### 标题解析:表格自动换行主义CSS属性 在网页设计和开发过程中,为了更好地控制表格布局和文本显示效果,使用CSS来实现表格内的文本自动换行是一项非常实用的技术。标题中的...

    jsp页面Table自动换行

    【标题】"jsp页面Table自动换行"涉及的是在JavaServer Pages (JSP) 技术中处理HTML表格(Table)的布局问题。在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格...

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

    本篇文章针对的就是这个常见的问题,即如何设置表格单元格宽度后,当内容太多无法完整显示时,可以实现自动换行的效果。 在HTML中,表格的布局和样式控制通常依赖于CSS。为了实现内容的自动换行,我们需要对table和...

    jsp强行给表格换行

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

    文本显示控件,支持长英文字符串自动换行

    它提供了自动换行的功能,同时还可以处理富文本(HTML格式),支持插入图片、表格等复杂内容。通过`setAcceptRichText(true)`,可以启用富文本模式;若只需显示不可编辑的文本,可以设置`setReadOnly(true)`。 在...

    CSS 文字自动换行

    #### 知识点五:表格布局中的自动换行 表格是网页布局中常用的一种结构,对于表格中的文本换行,CSS提供了更多灵活的控制方式。 - **`table-layout: fixed;`**:设置表格布局为固定宽度模式。这意味着每个单元格的...

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

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

    html 自动换行

    ### HTML自动换行知识点详解 #### 一、引言 在HTML页面布局中,自动换行功能对于确保文本内容能够适应不同的屏幕尺寸和容器大小至关重要。通过合理的设置,可以实现良好的阅读体验,尤其是在响应式设计中更为关键...

    freemarker生成复杂excel,带换行

    在Java开发中,利用Freemarker生成Excel文件能够极大地提高效率,特别是处理复杂表格时,其灵活性尤为突出。本示例重点在于如何通过Freemarker实现Excel单元格内的换行功能。 首先,我们需要理解Freemarker的基本...

    支持IE和FF同时自动换行

    - **`table-layout: fixed`**:固定表格布局,使得表格单元格宽度固定不变,这对于实现文本自动换行非常重要。 - **`word-wrap: break-word`**:允许长单词在其内部进行换行。 - **`word-break: break-all`**:...

    java 写的转pdf代码,支持表格内容的中文换行

    这个“java写的转pdf代码”是专为此目的设计的,它支持中文字符的正确换行以及表格内容的布局,同时允许开发者自定义CSS样式,以满足多样化的格式需求。 首先,我们要理解的是PDF(Portable Document Format)是一...

    CSS自动换行

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

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

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

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

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

    通过css样式控制单元格内超长文本自动换行.doc

    单元格自动换行问题是 Web 开发中常见的问题,特别是在表格中显示大量文字时,超长文本可能会溢出单元格,影响页面的美观和可读性。使用 `<wbr>` 标签可以解决这个问题,但是这只是一个临时的解决方案,并不能满足...

    sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色,居中,自动换行,宽度,百分数展示等

    而xlsx-style是SheetJS的一个扩展,它为SheetJS增加了样式支持,允许我们在前端生成具有丰富样式的Excel表格,如设置单元格背景色、文本居中、自动换行、调整宽度以及显示百分比等。 首先,让我们深入了解SheetJS的...

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

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

    CSS对表格单元格强制换行和不换行

    自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行 ...

Global site tag (gtag.js) - Google Analytics