纯css文本溢出省略（需定义宽度，兼容IE6、IE7、Firefox2.0、Opera9.0）

最新推荐文章于 2024-08-31 16:47:32 发布
原创 最新推荐文章于 2024-08-31 16:47:32 发布 · 826 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#ie #firefox #opera #css #float
本文介绍如何使用CSS实现文本溢出时显示省略号的效果，包括设置宽度、浮动及多浏览器兼容方案。


 1 .textoverflow a  {
 2  display : block ;
 3  width : 120px ;
 4  margin :  0px 0px 0px 3px ;
 5  white-space :  nowrap ;
 6  overflow :  hidden ;
 7  float :  left ;
 8  -o-text-overflow :  ellipsis ;      /*  for Opera  */
 9  text-overflow :  ellipsis ;          /*  for IE  */
10 }
11 .textoverflow:after {  content :  " " ;   } /*  for Firefox  */
12 @media all and (min-width: 0px) {  .textoverflow : after{ content:"" ;   } /*  for Opera  */  }
 
cafecheng
关注
html overflow阅读全文,css overflow: hidden 的用法(溢出隐藏及清除浮动)
weixin_28835583的博客
05-31 1194
溢出隐藏就是隐藏超出规定高度的文本或者图像信息。Documentdiv {background-color: yellow;width: 350px;height: 100px;overflow: hidden;}元素中的内容超出了给定的宽度和高度属性，overflow属性可以确定显示的方式，以及是否显示滚动条。这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，则隐藏超出范围的部...
文本溢出情况及隐藏元素的几种方法
goulite的博客
10-21 1302
以上是overflow属性的默认情况“overflow：visiable”，默认，允许溢出 overflow属性值设为scroll，设定内容溢出时出现滚动条，且滚动条可用； overflow属性值设置为hidden，设定内容溢出时隐藏超出元素的文本，没有滚动条； overflow：aut...
text-overflow: ellipsis；将整行内容隐藏现象
最新发布
m0_60528790的博客
08-31 413
偶尔会遇到许多难以达到自己期望的现象，比如。原因可能是在内容中误使用。将整行内容隐藏现象，
CSS中overflow:hidden;作用
ioszhanghui的博客
07-20 7219
在CSS样式操作用，常用的三种，一.解决操出边界，overflow:hidden;可以让超出部分裁剪掉。二.解决子元素float浮动，父元素没有高度。三.解决外边距塌陷，就是子元素的margin-top不起作用。 一.解决操出边界 在div盒子中，如果你对这个元素设置width和height，但是子元素的内容比较大，就会超出父元素的界定范围，如果想要内容不限，就需要设置overflow:hid...
css实现超出长度文字自动隐藏或用省略号表示
嵒碞
12-25 396
HTML <a href="" target="_blank"> 业务需求分析书-系统营业日扎帐报表、收费汇总表及收费明细表 </a> css a{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;display: inline-block;} overflow:...
[原创] 纯css文本溢出省略（需定义宽度，兼容IE6、IE7、Firefox2.0、Opera9.0）
banjue1105的博客
06-23 129
1.textoverflowa{}{ 2display:block; 3width:120px; 4margin:0px0px0px3px; 5white-space:nowrap; 6overflow:hidden; 7float:left; 8-o-text-overflow:ellipsis;/**//*fo...
CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
清风的专栏
06-09 1107
CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）html代码：<br /> <div><br /><p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p><br /> </div><br /><br /> css代码：<br /> div{<br />width:200px;/*容器的基本定义*/<br /> height:200px;<br /> background-color:
CSS文本溢出省略号：text-overflow:ellipsis及firefox兼容详解
Tomysk
07-19 867
溢出文本显示省略号,text-overflow:ellipsis           这个标题其实已经是一个老生常谈的问题了。很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。通常做法
html设置文字超过字数_html文本控制显示字数超出用省略号的方法
weixin_39639518的博客
12-19 2426
html文本控制显示字数超出的方法怎么解决？也就是文字溢出控制显示字数，table文字溢出控制td显示字数看到标题你一定很轻易就会想到截断文字加省略号“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。下图就是php中文网(www.php.cn)超出字数加省略号的显示效果首先，先解释一下，一般用DIV+css的容器中文字超出长...
关于overflow:hidden的作用:溢出隐藏、清除浮动、解决外边距塌陷问题
debugtoday的博客
02-24 1823
关于overflow:hidden的作用:溢出隐藏、清除浮动、解决外边距塌陷问题
display与overflow同时使用时，overflow会失效如何解决
肥晨开发的学习之路
01-17 1165
前两天在写业务的时候发现，如果使用了display，overflow的部分功能就会失效。 想要效果： 但是使用了display和overflow后。。。 代码： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; 效果： 刚开始不理解，后来发现两个...
css控制文本超出显示省略号结合flex布局
qq_44926822的博客
01-21 1195
css控制文本超出显示省略号结合flex布局 本文只作为本人遇到相同问题时的查询，若有不足请指出。 本文遇到的情况 html代码 <div class="p"> <div class="p1"><span>xxxxxxx</span></div> <div class="p2"><span>xxxxx</s...
Flex布局下如何使用text-overflow:ellipsis省略过长文本
Hello博客
01-30 4490
问题 试想一下我们如何通过Flex布局实现下面这个组件呢？ 中间显示的文字内容过长是可以自动省略 Flex布局实现方法一(推荐) HTML： <div class="container"> <div class="field"> <div class="title">文本输入</div> <div cl...
overflow: hidden 的用法：溢出隐藏及清除浮动
开水水的博客
03-01 7356
overflow:hidden的几种常用用法：溢出隐藏、清除浮动和消除图片底部留白。
text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
jingtian678的博客
08-16 3672
  三者缺一不可，需同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果：   li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden...
css 超出长度显示省略号 text-overflow: ellipsis;
nayi_224的博客
02-19 560
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .cla1{ overflow: hidden; white-space: nowrap; ...
CCS3属性之text-overflow:ellipsis;的用法和注意之处
weixin_30363817的博客
06-19 190
语法： text-overflow：clip | ellipsis 默认值：clip 适用于：所有元素 clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 ellipsis： 当对象内文本溢出时显示省略标记（...）。 在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候，必须配合overflow:hidden; ...
text-overflow:ellipsis溢出文本显示省略号的详细方法
Java海洋
03-24 1401
<br />　今天有朋友在52css.com的留言板提出一个问题：为什么 text-overflow:ellipsis的时候没有任何效果呀？text-overflow是一个比较特殊的属性，在CSS手册中，这个属性是这样定义的：<br /><br />　　语法： <br />　　text-overflow : clip | ellipsis <br /> <br />　　参数： <br />　　clip : 　不显示省略标记（...），而是简单的裁切<br />（clip这个参数是不常用的！）<br />
Html table td里使用overflow:hidden无效解决方法
热门推荐
ajoashop的博客
04-27 1万+
在表格里经常用到溢出隐藏，溢出省略，发现直接在td标签里使用overflow:hidden有时无效。 如果遇到这种情况，尝试两种方式可以解决： table td使用overflow:hidden无效解决方法：  解决方法一： 在table里使用table-layout:fixed;   table-
text-overflow:ellipsis 不显示省略号问题
m0_37697423的博客
06-14 3396
设置单行文字长度多长以省略号显示 css样式 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 结果发现没有发生作用 结果是因为设置了display:flex的原因 暂时记录一下问题 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值