数字和英文的时候，TABLE中的TD就会被拉长，不会自动换行了。全角的时候是可以的。
解决方法是：
总结了一下，只要在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;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。
liushengit
- 浏览: 36502 次
- 性别:
- 来自: 石家庄
-
最新评论
相关推荐
layui数据表格自动换行，当设置固定列时，会出现行高不一致的问题，用户体验不好，只需要在页面中增加几行代码即可解决。
在网页设计中，经常需要处理表格（table）的布局问题，特别是当单元格（cell）内的文本内容过长时，如何保持单元格的固定宽度，不让内容换行，并在显示不下的情况下添加省略号（"..."）表示内容被截断。这涉及到CSS...
在本篇文章中，我们讨论了 CSS 控制文本自动换行的问题，并提供了两个解决方案：`table-layout: fixed;` 和 `word-break: break-all; word-wrap: break-word;`。这些样式可以让表格中的字符自动换行，避免网页被撑开...
本文将深入探讨如何使用JavaScript和CSS来实现`td`内容不换行且不撑开单元格的效果。 首先，我们需要理解CSS中的几个关键属性，它们在解决这个问题上起着核心作用： 1. `white-space`: 这个属性控制元素内的空白符...
word-break:break-all” 来解决这个问题，但有些时候会导致内容显示不完整而被隐藏了起来，并没有做到自动换行的效果。 于是偶就想写一个这样的函数来修补这个缺陷，这个函数很简单，但这里只是提供一种思路来解决...
例如l：lovelovelovelovelovelovelovelovelovelovelovelove这样的，于是乎，我们的td就被无情的撑开了，无法换行，⊙﹏⊙ 解决方案： 一般有两种：就是td里面再套一个div，然后设置这个div的...换行，问题就解决了。
word-break:break-all"来解决这个问题，但有些时候会导致内容显示不完整而被隐藏了起来，并没有做到自动换行的效果。 为了解决这个问题，我们可以使用javascript实现的一个自定义长度的文本自动换行的函数。这个...
`nowrap`属性可以防止文本换行，所以当我们同时使用`table-layout: fixed`和`nowrap`时，可以有效地控制单元格内容不换行，从而保持表格的固定大小。 然而，当我们在单元格内指定具体宽度（如像素值`width=20`）并...
你好朋友朋友朋友我为什么不能看到效果啊 ``` 这里，`width` 设置了容器的最大宽度，`overflow:hidden` 隐藏超出的内容，`white-space:nowrap` 防止文本换行，而 `text-overflow:ellipsis` 则添加省略号。 2....
然而，在实际操作中，可能会遇到Layui表格无法自动调整高度的问题，导致内容被遮挡或者布局不协调。本文将详细介绍如何解决这一问题。 首先，我们需要了解Layui表格的基本结构和样式。Layui表格由多个`.layui-table...
为了解决这个问题，我们可以采用CSS来控制单元格的内容显示，使其不再自动撑开单元格。下面我们将详细探讨这个话题。 首先，我们需要设置表格的宽度（width）和表格布局（table-layout）。在示例代码中，`table`...
`则用于解决英文文本（非亚洲语言）撑开表格的问题。在多数情况下，只需`table-layout:fixed;word-wrap:break-word;`即可。 4. **CSS控制图片自适应**：利用CSS的`max-width`和`width`属性以及`overflow:hidden`，...
文章还提到了一些相关的CSS和jQuery在处理表格时的示例，如列表标签`<list>`与表格标签`<table>`的用法，使用jQuery和CSS实现表格行列转置，样式切换，以及通过JavaScript和CSS的`expression`实现表格居中显示、拖动...
然而，在处理表格宽度时，有时会遇到一个问题：当表格中的文字过长，不换行导致表格宽度被撑开，无法保持预设的固定宽度。这会给页面布局带来困扰，尤其是当你希望表格的列宽保持一致时。为了解决这个问题，我们可以...
然而，由于描述中提到英文字符输入会导致表格撑宽的问题，仅仅使用“word-wrap: break-word”和“word-break: break-all”可能还不足以完全解决问题，因为这两个属性都是在内容溢出时才触发效果，而如果在表格宽度...
- 容器高度问题：IE6默认行高导致问题，可以使用`overflow`、`zoom`或`line-height`来解决。 - 层显示在FLASH之上：设置FLASH的`wmode`属性为`transparent`。 - 层垂直居中：利用绝对定位和负外边距，或者使用`...