`
469957559
  • 浏览: 39898 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

TABLE自动换行 解决不能换行撑开等问题

阅读更多

TABLE自动换行:
数字和英文的时候,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;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。

 
分享到:
评论

相关推荐

    layui-table固定列自动换行.txt

    layui数据表格自动换行,当设置固定列时,会出现行高不一致的问题,用户体验不好,只需要在页面中增加几行代码即可解决。

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

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

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

    在本篇文章中,我们讨论了 CSS 控制文本自动换行的问题,并提供了两个解决方案:`table-layout: fixed;` 和 `word-break: break-all; word-wrap: break-word;`。这些样式可以让表格中的字符自动换行,避免网页被撑开...

    javascript 使td内容不换行不撑开

    本文将深入探讨如何使用JavaScript和CSS来实现`td`内容不换行且不撑开单元格的效果。 首先,我们需要理解CSS中的几个关键属性,它们在解决这个问题上起着核心作用: 1. `white-space`: 这个属性控制元素内的空白符...

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

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

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

    word-break:break-all"来解决这个问题,但有些时候会导致内容显示不完整而被隐藏了起来,并没有做到自动换行的效果。 为了解决这个问题,我们可以使用javascript实现的一个自定义长度的文本自动换行的函数。这个...

    table中td内容换行问题

    例如l:lovelovelovelovelovelovelovelovelovelovelovelove这样的,于是乎,我们的td就被无情的撑开了,无法换行,⊙﹏⊙ 解决方案: 一般有两种:就是td里面再套一个div,然后设置这个div的...换行,问题就解决了。

    Html 页面的强制换行问题总结

    `nowrap`属性可以防止文本换行,所以当我们同时使用`table-layout: fixed`和`nowrap`时,可以有效地控制单元格内容不换行,从而保持表格的固定大小。 然而,当我们在单元格内指定具体宽度(如像素值`width=20`)并...

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

    你好朋友朋友朋友我为什么不能看到效果啊 ``` 这里,`width` 设置了容器的最大宽度,`overflow:hidden` 隐藏超出的内容,`white-space:nowrap` 防止文本换行,而 `text-overflow:ellipsis` 则添加省略号。 2....

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

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

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

    为了解决这个问题,我们可以采用CSS来控制单元格的内容显示,使其不再自动撑开单元格。下面我们将详细探讨这个话题。 首先,我们需要设置表格的宽度(width)和表格布局(table-layout)。在示例代码中,`table`...

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

    `则用于解决英文文本(非亚洲语言)撑开表格的问题。在多数情况下,只需`table-layout:fixed;word-wrap:break-word;`即可。 4. **CSS控制图片自适应**:利用CSS的`max-width`和`width`属性以及`overflow:hidden`,...

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

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

    CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器).docx

    这里的`width="10"`是一个技巧,即使得表格在没有图片时也有一个最小宽度,但实际图片会自动撑开表格,因此这个设置不会影响图片的显示。 这种方案的一个关键优点是它的跨浏览器兼容性。经过测试,它在IE、Firefox...

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

    然而,由于描述中提到英文字符输入会导致表格撑宽的问题,仅仅使用“word-wrap: break-word”和“word-break: break-all”可能还不足以完全解决问题,因为这两个属性都是在内容溢出时才触发效果,而如果在表格宽度...

    网站设计师面试题.docx

    - 容器高度问题:IE6默认行高导致问题,可以使用`overflow`、`zoom`或`line-height`来解决。 - 层显示在FLASH之上:设置FLASH的`wmode`属性为`transparent`。 - 层垂直居中:利用绝对定位和负外边距,或者使用`...

Global site tag (gtag.js) - Google Analytics