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的定义才能起作用。 */  
}
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐