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

table表格内容过多时自动换行css

阅读更多
作者:zccst

总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了。

table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}
//(1)word-break设置强行换行  break-all强制英文单词断行
//(2)break-word;内容将在边界内换行。如果需要,词内换行(word-break)也行发生

注释一下:

1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。

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

(1)语法:word-break : normal | break-all | keep-all

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

(2)语法:word-wrap : normal | break-word

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

说明:

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

(3)语法:table-layout : auto | fixed

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

说明:
如何让表格自动换行?
设置或检索表格的布局算法。
对应的脚本特性为tableLayout。


4.按照网上大多数文章的说法,只要在CSS中加入:
代码
..........

Code:
table {table-layout:fixed;word-break:break-all;word-wrap:break-word;}
div{word-break:break-all;word-wrap:break-word;}

就可以解决表格和层被撑破,最初我也是这样做的。不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读。

后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
如下:
代码

Code:
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}

这也是现在我用的代码。

如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    jsp页面Table自动换行

    在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格需要在视觉上分成多行显示。在JSP中,这可以通过CSS样式和HTML属性来控制。 【描述】提到的“Linux文档”可能是...

    表格自动换行主义CSS属性

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

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

    在使用table展示内容时,经常会出现内容过长超出了单元格(td)的宽度,导致无法完整展示全部内容的情况。传统的table布局常常会导致内容溢出,影响页面的整体美观性。本篇文章针对的就是这个常见的问题,即如何设置...

    html中表格td内容自动换行

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

    CSS 文字自动换行

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

    CSS自动换行

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

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

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

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

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

    jsp强行给表格换行

    除了CSS之外,还可以通过JavaScript动态调整表格内容的长度并插入换行符,从而达到自动换行的效果。下面是一个简单的示例代码: ```javascript //<![CDATA[ function toBreakWord(intLen) { var obj = document...

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

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

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

     用CSS实现Table单元格数据自动换行或不换行的实现方法:  1、强制换行: <style type=text/css>.AutoNewline{ word-break: break-all;/*必须*/}</style><table><tr> 自动换行自动换行自动换行自动...

    支持IE和FF同时自动换行

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

    深入解析HTML的table表格标签与相关的换行问题

    在处理表格时,换行问题是一个常见的挑战,尤其是当表格内容较长或需要特定的布局时。 首先,`<table>`标签的属性如`border`, `cellspacing`, `cellpadding`和`width`对表格的外观和行为有着直接影响。`border`设定...

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

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

    浅析响应式框架中,table表头自动换行的快速解决方法

    最近在用bootstrap开发网站,在处理一张table的时候发现,通过...以上这篇浅析响应式框架中,table表头自动换行的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    通过CSS让TD自动换行

    为了使TD在内容过长时自动换行,我们可以利用CSS的`word-break`属性。`word-break`属性允许我们在特定条件下打破单词内部的连续性,进行换行。`word-break: break-all`是一个常用的值,它表示在任何字符处都可以进行...

    css之自动换行.docx

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

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

    本文将详细探讨如何通过CSS来实现块级元素内容的自动换行。 首先,需要明确块级元素的特性。块级元素默认会占据整行的空间,也就是说,它们会从新的一行开始显示,并且尽可能地占据宽度的100%。这样的特性使得块级...

Global site tag (gtag.js) - Google Analytics