html中table表格中的单元格内的文字超过设定宽度的解决方案

这是我的第一篇文章

这是昨天遇到的一个问题,我在测试项目功能的时候其中涉及了一个表格,其中每个单元格内的文字是会动态添加的,在css中已将这个表格按着固定宽度排版好了,前期测试时没有发现问题,一切正常,就在昨天,我将一个标题的文字长度设置的很大,最后显示在表格里,发现这个文字长度将该单元格撑开的很大,以致整个表格排版出现的问题,所以我就想到了要改造显示在单元格的文字,项目中有一个用js写的方法是改变当文字超出给定宽度后自动隐藏超出部分,但是这个方法也有弊端,该方法是以文字的长度来计算的,但是不同文字其实占用的实际空间其实是不同的,相同的文字长度最终显示的占用空间也是不一样的,如何方法里固定了长度,最终还是会出现以上问题,所以我就去百度下有没有相关解决方法,

结果找到了这个样式属性:

text-overflow：clip | ellipsis;

clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。
ellipsis： 当对象内文本溢出时显示省略标记（...）。

一般来说这个属性的适用对象为块级元素,

经测试确实可以满足要求,但是使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:100%;前两个条件为固定搭配,width的值以实际为准

至于table元素,在使用这个属性的时候需要给table元素再加上table-layout:fixed,同时需要设置width值(100%);其次单元格设置以上所列出的样式,

这样当每个单元格内的文字超出设定宽度也不会影响布局了