使用text-overflow属性: div.test { text-overflow:ellipsis; } 尝试一下 » 在此页底部有更多的例子。 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 text-overflow 4.0 6.0 7.0 3.1 11.09.0 -o-属性定义及使用说明text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置...
text-overflow: ellipsis; /*1*/ overflow: hidden; /*2*/ white-space: nowrap; /*3*/ word-break: break-all; } 多行文本溢出显示多行文本溢出显示多行文本溢出显示 二、多行文本溢出 WebKit浏览器有一个-webkit-line-clamp的属性,用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本...
text-overflow:ellipsis这是一个特别长的文本 结果: 这是一个特别长的文本另行参阅:盒模型分类: CSS属性 Text Text-overflowCSS属性:text-indentCSS维基 CSS属性:hanging-punctuationCSS维基 CSS属性:letter-spacingCSS维基 CSS属性:line-heightCSS维基 CSS属性:tab-sizeCSS维基 CSS属性:text-alignCSS维基 CSS属性:...
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。 兼容性: text-overflow : clip text-overflow : ellipsis 从上面...
text-overflow属性不会强制发生溢出。要使文本溢出它的容器,你必须设置一些其他的CSS属性。例如: 代码语言:javascript 复制 overflow:hidden;white-space:nowrap; text-overflow属性只影响内联进程方向溢出块容器元素的内容(例如,不在文本框底部溢出的文本)。
Opera浏览器不支持单纯的text-overflow:ellipsis属性,换句话说就是使用text-overflow:ellipsis属性无法实现Opera浏览器下文字溢出点点点的表示。但是Opera浏览器有一个私有属性可以实现上述的功能,就是在text-overflow的前面加上"-o",也就是-o-text-overflow:ellipsis,于是,就实现了Opera浏览器的文字溢出省略号表示的功能...
auto: 在需要时裁剪内容并添加滚动条,此为body对象和textarea的默认值。 3.说明: 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而...
text-overflow ： clip | ellipsis 取值：clip：不显⽰省略标记（...），⽽是简单的裁切。ellipsis：当对象内⽂本溢出时显⽰省略标记（...）说明：1. 设置或检索是否使⽤⼀个省略标记（...）标⽰对象内⽂本的溢出。对应的脚本特性为textOverflow。2. text-overflow属性仅是注解，当⽂本溢出时...
1,overflow:hidden; 这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部不显示才能裁剪。不然裁剪之后还是显示溢出就想日狗了 试了下visible. 那text-overflow就不管用了。该溢出还是溢出。管你用没用text-overflow。
text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 这小段CSS甚至兼容至IE6,毕竟text-overflow: ellipsis;原本就是IE的专属,于是早期文本截断的抗争主要是在Firefox上,直到Firefox7.0,我们才抛开对于FF的伎俩而专注使用这段代码。当然多行截断还是没戏,在一些跨浏览器兼容要求较高的场合,前端一度需要...