`
wenson
  • 浏览: 1053741 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

表格自动换行,避免撑开

阅读更多
用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:(
总结了一下,只要在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。
分享到:
评论
1 楼 xuganggogo 2010-05-14  
加<pre>就不会换行了。

相关推荐

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

    CSS控制文本自动换行的问题 在网页设计中,CSS控制文本自动换行的问题是一个常见的问题,尤其是在使用表格进行网页排版的时候。...这些样式可以让表格中的字符自动换行,避免网页被撑开,影响网页的布局和美观性。

    javascript 使td内容不换行不撑开

    在默认情况下,如果单元格中的内容太长,它会自动换行并可能拉伸单元格的宽度。 为了防止`&lt;td&gt;`内容换行并撑开单元格,我们需要使用CSS来设定相应的样式。在提供的代码中,我们可以看到以下CSS规则: ```css table...

    网页表格或div层在网页中被撑开解决之道

    这样,图片过大时会被自动缩放,并隐藏超出部分,避免表格或div层被撑开。 5. **针对表格和div层的通用解决方案**: - 对于表格,推荐使用`table {table-layout: fixed;word-break: break-all;}`。`table-layout: ...

    解决Layui 表格自适应高度的问题

    然而,在实际操作中,可能会遇到Layui表格无法自动调整高度的问题,导致内容被遮挡或者布局不协调。本文将详细介绍如何解决这一问题。 首先,我们需要了解Layui表格的基本结构和样式。Layui表格由多个`.layui-table...

    css实现不再让内容把td撑开的常用解决方法

    在网页设计中,经常遇到一个问题,那就是表格中的单元格(td)会被其内部的内容自动撑开,导致表格的布局混乱。这种情况通常是由于内容长度超过了单元格的预设宽度,浏览器会默认扩展单元格来适应内容。然而,我们...

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

    在表格中,可以使用 `table-layout: fixed` 来控制表格的布局算法,使其根据列宽而不是内容宽度进行布局,以避免单元格内容撑开表格。 ```css table { table-layout: fixed; } ``` 这样,表格的宽度将仅取...

    字符不会撑大表格的常见css样式

    使用它可以在内容超出其容器边界时进行自动换行,避免单个单词或短语撑宽表格。 再来看“word-break: break-all”,这个属性使得浏览器在任何字符之间进行断行,即使它不是一个空格或者连字符。这样一来,如果内容...

    表格单元格内容超出时显示省略号效果(实现代码)

    `属性用于控制文本不换行,这样可以保证当表格单元格宽度不足以显示全部内容时,文本不会自动换行。`overflow: hidden;`属性则是用来隐藏超出单元格宽度的部分,如果内容超出单元格的宽度,这一部分将被隐藏。最后,...

    设置table中的宽度不随文字改变让其固定

    然而,在处理表格宽度时,有时会遇到一个问题:当表格中的文字过长,不换行导致表格宽度被撑开,无法保持预设的固定宽度。这会给页面布局带来困扰,尤其是当你希望表格的列宽保持一致时。为了解决这个问题,我们可以...

    div+css布局中常用方法汇总.docx

    1. **文本框textarea自适应高度**:可以通过设置`textarea`的`style`属性,如`overflow-y: visible`,使其随内容自动调整高度。 2. **鼠标指针样式**:使用`cursor: pointer`可以使元素的鼠标指针变为手形,提示...

Global site tag (gtag.js) - Google Analytics