table表格中文字超出显示省略号

第一步：

table {table-layout：fixed；}列宽由表格宽度和列宽度设定，不随文字多少变化

第二步：

td {

white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/

overflow:hidden;/*隐藏多余的内容*/

text-overflow:ellopsis;/*显示省略符号来代表被修剪的文本 for IE*/

-moz-text-overflow: ellipsis; /* for Firefox,mozilla */

}

时间： 2024-10-06 00:07:41

table表格中文字超出显示省略号的相关文章

单行、多行文字超出显示省略号

单行 display:inline-block/ block;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

单行: white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行: word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 原文地址:https://www.cnblogs.com/Waiting-Lia

Html table 内容超出显示省略号

内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { border: 1px solid #999; padding: 5px; text-align: left; } td.desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <tabl

css 文字超出用省略号显示

在一行文字超出用省略号显示我们经常会使用如下方法 display:block; width:100px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 但要求两行及以上时,我们需要换另一种方法,代码如下 display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 此时要求父级的宽度是确定的,如

div中文字超出时自动换行

在开发中很容易遇到div中文字超出的问题,在此总结以下方法: white-space 属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支持 white-space 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 值描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. nowrap

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断. 先给出各种方式,再具体介绍每一个属性. 强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; } 强制英文单词断行

文字超出用省略号代替

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-

文本超出显示省略号/数字字母折行有关css 属性

文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折行 word-break:break-all; 英文单词会分开折行 word-wrap:break-word; 英文单词完整处折行令拓展: word-spacing :5px; 单词/字符之间间隔距离 white-space是字符是否换行显示的. 原文地址:https://www.cnbl

td文字溢出显示省略号

昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflow:ellipsis;//显示省略号 } 然后查了查网上遇到的类似问题,用table-layout:fixed;可以解决此问题,但是我发现这个方法并不完美,甚至改变了我设置的td的大小,本来以30%和70%的显示的td,设置此属性之后居然以50%和50%显示,这就让我不爽了.于是乎花了好长时间解决这