`

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中的多余字体自动换行的

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

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

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

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

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

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

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

    word-break:break-all” 来解决这个问题,但有些时候会导致内容显示不完整而被隐藏了起来,并没有做到自动换行的效果。 于是偶就想写一个这样的函数来修补这个缺陷,这个函数很简单,但这里只是提供一种思路来解决...

    Asp.Net中文本换行

    刚刚入门学习ASP.NET的朋友,都会碰到把大量带有换行文本的内容显示时,不会自动换行的问题。本人现在把解决这一问题真正有效的办法告诉大家,共同学习: 在VB.NET中: 1 Function HtmlCode()Function HtmlCode...

    js实现固定表头表列和表格翻页

    3. 实现表格奇偶行不同颜色,即换行变色; 4. 实现表格分页功能,可指定是否开启分页功能及每页行数; 5. 排序数据支持数据类型自动识别(这点很强大)。例如:整型数据、浮点型数据、字母、电话号码、日期、链接 6....

    Js特效 表格分页排序

    3. 实现表格奇偶行不同颜色,即换行变色; 4. 实现表格分页功能,可指定是否开启分页功能及每页行数; 5. 排序数据支持数据类型自动识别(这点很强大)。例如:整型数据、浮点型数据、字母、电话号码、日期、链接 6....

    JS固定表头和左边列(最新源码)1.9

    1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2.表格父容器尺寸大小改变时,需要调用 setBoxSize 方法,...

    55种网页小技巧 ---- 下载无需扣分,具有一定收藏价值

    自动的为你每次产生最後修改的日期了.html 获得一个窗口的大小.html 让弹出窗口总是在最上面.html 跑马灯 .html 选择了哪一个Radio .html 防止复制.html 防止被人frame.html 页面的打开移动.html 页面进入...

    html 讲解 文字 图片 表格相关 frame 页面布局

    13.换行(也称回车) 14.分段 <p> 15.文字的对齐方向 <p align="#"> #号可为 left:表向左对齐(预设值) center:表向中对齐 right:表向右对齐 P.S.之后的文字都会以所设的对齐方式显示,直到出现另一个...

    MediaPacker 2.0 汉化版

    元素(MediaPacker 的一个很大的优点就是对中文的自动换行支持极好, 不会出现某些同 类软件在这方面出现问题).程序附带一个 "注册用户发生器",可以设置生成的 eBook 的 使用密码,保护了作者及出版商的利益.

    Qt制作的富文本编辑器

    它支持富文本格式(HTML)、自动换行、拼写检查、撤销/重做操作等功能。 可以通过设置样式表或加载 CSS 文件来自定义 QTextEdit 的外观。 支持各种剪切/复制/粘贴操作,并可以插入图像、列表、表格等富文本元素。 ...

    JS固定表头和左边列V2.0(源码)

    1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2.表格父容器尺寸大小改变时,需要调用 setBoxSize 方法,...

    北大青鸟订餐系统(restrant)纯html(div+css)

    本人在青鸟时做的 订餐系统 页面 div+css 纯html 和品红一样 说明:首先首页遍历菜的时候,不需要像...直接遍历就行,我是用浮动排的 会自动适应 自动换行。 下载下来 你们改改 添新功能 什么的 就是你们的事了,呵呵

    从入门到精通HTML5——PDF——网盘链接

     7.1.1 表格的基本构成——table、tr、td 119  7.1.2 表格的标题——caption 120  7.1.3 表格的表头——th 121  7.2 设置表格基本属性 123  7.2.1 表格的宽度——width 123  7.2.2 表格的高度——height...

    Html富文本tinymce_powerpaste-master,word复制粘贴保留格式,含Tinymce5.2包和示例代码

    因客户要求word复制粘贴到富文本编辑器保留格式,不然发文章内容太多调整费时间,找了很久,Html富文本编辑器tinymce_powerpaste-master,word复制粘贴保留格式,免费版含示例代码,简单上手,亲测效果一级棒,困扰...

    Web前端开发基础:CSS制作电子相册.ppt

    div与span的区别在于,div是一个块级(block-level)元素,它包围的元素会自动换行, 而span仅仅是个行内元素(inline elements),不会换行。 span没有结构上的意义,当其 他元素都 不合适的时候可以换上他,同时div...

    F5在线HTML编辑器 v4.0

    12、提供原创的“自动排版”、“黑溜溜排版”功能,只需单击一下,一秒内完成对外网的文章进行粘贴、去格式、开头空格、急速自动排版(*);13、支持图片、动画、音频、视频等文件的在线添加功能,无缝对接(*);14...

Global site tag (gtag.js) - Google Analytics