table表格某一td内容太多导致样式混乱的如何解决方案

刚坐在车里就开始电闪雷鸣。听着隆隆的雷声,没有恐慌,到有几分振奋人心的舒心感、酣畅淋漓感。朝外望去,突然间,狂风夹杂着骤雨席卷而来,一泻千里。瞬间暴雨如注,打在地上,溅起朵朵浪花,在热浪的蒸腾下激起层层水雾。满大街是慌乱的人群,行人跑着、叫喊着,唧唧喳喳的赶着在房檐下躲雨。这时候伞是没有用的,挡不住狂风暴雨的袭击,无论是带了伞的,还是没带伞的,全都躲在了房檐下。
问题

在开发过程难免遇到这样那样的问题。对于有很多条目的数据,我们通常采用table元素来快速实现。如果某一个td的内容太多的话就会出现下面的情况,导致样式混乱难看:



解决方案

要让table的宽度固定我们可以给table元素设置table-layout:fixed;样式,但这样表格的宽度问题是解决了,但是里面的内容并不会自动换行。我们还需要给td设置word-break: break-all; word-wrap:break-word;即可完美解决。如下图:



这样的确可以很好地解决问题。记录下,以备后用。

到此这篇关于table表格某一td内容太多导致样式混乱的如何解决方案就介绍到这了。如果不想做点事情,就不要想到达这个世界上的任何地方。更多相关table表格某一td内容太多导致样式混乱的如何解决方案内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
详解在table设置max-width以及min-width兼容问题和如何解决方案

用CSS3和table标签如何实现一个圆形轨迹的动画的示例代码

contenteditable元素的placeholder输入提示语设置方法

table-cell完成左侧定宽,右侧定宽及左右定宽等布局的如何实现方法

不用table而如何实现等分DIV的方法