table表格中的内容溢出布局的解决方法

关于table表格中的内容溢出布局的解决方法

　　什么是内容溢出呢？其实就是当文字很多的时候，如果内容区域只有那么长，那么多出的部分以点点点代替。

　　这次做的案例是在table里面，我们知道当我们在table里输入过多的文字内容的时候会撑乱表格，例如一行显示过长或者自动换行。可是有的时候我们就想在固定宽度的一行中显示，如果多出的部分那就用点点点代替，这样就不会撑乱表格了。那么该如何做呢？

　　一般来说我们会用到如下属性

　　CSS Code复制内容到剪贴板 /*溢出部分样式*/ .txt-ell{ whitewhite-space:nowrap;//强制在一行显示 overflow:hidden;//溢出的内容切割隐藏 text-overflow:ellipsis;//当内联溢出块容器时，将溢出部分替换为… word-break:keep-all;//允许在单词内换行 color:red;//这里我自己标识一下 padding:07px;//由于想跟边线留有距离，所以设置了下 }CSS Code复制内容到剪贴板 .table-fix{ table-layout:fixed; }

　　首先第二个样式是专门给table标签加的，想要实现内容溢出，那么表格必须有固定的宽高，表格内部的tr，td也要有固定的宽高。在用内容溢出之前，先要给table添加table-fix这个类。然后检查自己的tr，td有没有给width，如果没有的话，最好是给个吧，固定的也行，百分比的也行，我主要给的百分比，外边table给固定宽度，里面的tr和td就是百分比的宽度，这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多，你想实现点点点，就给这个格子添加一个.txt-ell的类吧

【table表格中的内容溢出布局的解决方法】相关文章：

Excel表格中如何换行04-02

网页设计的布局12-06

常见的网页布局设计04-21

Excel表格中怎么彻底隐藏数据02-24

Dreamweaver窗口如何布局的方法02-07

网页设计的布局的方式有哪些09-01

建筑施工合同中的必备内容11-17

网页设计要明确的那些布局细节12-20

建设完美网站布局的20个步骤10-26

英语四级作文布局10-20