table 表格中的内容溢出的解决方法
table 表格中的内容溢出的解决方法直接css样式解决文字溢出 变为省略号(示例)代码如下 :/*溢出部分样式*/td, th {white-space:nowrap;//强制在一行显示overflow:hidden;//溢出的内容切割隐藏text-overflow:ellipsis; //当内联溢出块容器时,将溢出部分替换为…word-break:keep-all;//允许在单词内换行}属性讲
·
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的定义才能起作用。 */
}
更多推荐
已为社区贡献1条内容
所有评论(0)