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

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

直接css样式解决文字溢出 变为省略号（示例）
代码如下 ：

/*溢出部分样式*/
td, th {
    white-space:nowrap;  //强制在一行显示
    overflow:hidden;    //溢出的内容切割隐藏
    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…
    word-break:keep-all;  //允许在单词内换行
}

属性讲解
white-space

• normal 默认； 空白会被浏览器忽略
• pre 空白会被浏览器保留。其行为方式类似 HTML 中的

   标签。

• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。
• pre-warap 保留空白符序列，但是正常地进行换行。
• pre-line 合并空白符序列，但是保留换行符。
• inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow 属性规定当文本溢出包含元素时发生的事情。

• clip 修剪文本。
• ellipsis 显示省略符号来代表被修剪的文本。
• string 使用给定的字符串来代表被修剪的文本。

除此之外，还需要在 table 元素添加样式 :

table{
	width : 100px;
	table-layout : fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */  
}