html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
关于Firefox下截取后省略号的问题
时间:2016-04-19
今天在用到text-overflow的ellipsis属性得时候,突然发现原来FF下是没有省略号得(才发现,汗)。不想把这个问题交给后台或者用JS来做了,于是找了个折中的办法,就是:after伪类来模拟FF下的省略号。
具体做法就是给content一个…的值,然后hack解决宽度问题,这样看起来就舒服一些了。
可能有BUG或者还有更好得办法,希望兄弟们告诉一下。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:style type="text/css"><!-- body{ font-family: 宋体; font-size: 12px; color: #333333; } .div1{ width:200px; } .div1 a{ white-space:nowrap; text-overflow:ellipsis; /* for internet explorer */ overflow:hidden; width:168px;+width:200px;_width:200px; display:block; float:left; } html>body .div1:after{ content: "..."; margin-left:5px; } --></mce:style><style type="text/css" mce_bogus="1">body{ font-family: 宋体; font-size: 12px; color: #333333; } .div1{ width:200px; } .div1 a{ white-space:nowrap; text-overflow:ellipsis; /* for internet explorer */ overflow:hidden; width:168px;+width:200px;_width:200px; display:block; float:left; } html>body .div1:after{ content: "..."; margin-left:5px; }</style></head> <body> <div class="div1"><a href="#" mce_href="#">把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧</a></div> </body> </html>
提示:您可以先修改部分代码再运行
不过我在IE8下测试的时候,发现多出了...,因此在 content: "...";后面加多一个 content:"\9";
上一条:css 画的百度LOGO
下一条:css 文字上右下环绕广告的写法
相关文章
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行。 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31
CSS截取字符串, 多余的字符用省略号显示
在开发过程中,我们有时候会遇到这样的问题,用列表显示文章标题时,由于标题过长,导致内容超出列表宽度。 解决这样的办法有很多,可以用动态语言截取字符串处
网页制作需要了解的IE8、IE7、IE6、Firefox3、Firefox2的CSS hac
可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks,可以尽量的满足各种浏览器下的正常显示。
IE与Firefox中兼容的html设计中使用CSS改变鼠标为手形
从来都很不爽于Firefox与IE的CSS不兼容问题,这固然有历史原因,但是很大程度上是微软IE对标准的默认支持不好的原因,为了保护自己的产品,硬是把客户拉到自己特
针对firefox ie6 ie7 ie8的css样式hack
针对firefox ie6 ie7 ie8的css样式hack 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对!important可以正确解释,会导
css 简单区别ie6,ie7,firefox的写法
同一样式里可以这样[code]margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code]按这个顺序,刚好区分开三个浏览器
最新文章
Windows自动更新造成“HTTP Error 503,The service is unavailable。”
公司开发的某业务系统出故障了,于是通过VPN在家里直接访问该系统,结果系统器返回 Service Unavailable --------------------------------------------------------------
iframe 如何设置高度自适应 - iframe 自适应高度的方法
最近些项目遇到用iframe的地方,发现设置的固定高有时不能完全适应项目环境,不是高了就是不够高,在页面里看着很不爽。如何想办法到使用 iframe 自适应高度的方法,下面分
纯CSS打造响应式自适应分页条
在html中,怎么设置背景图片不重复不平铺,只显示一张图片
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
css float 浮动属性使用方法和实例讲解
css margin外边距使用实例分析
iframe 如何设置高度自适应 - iframe 自适应高度的方法
完美解决Iframe高度自适应(兼容性好并且支持跨域)
html hidden隐藏域作用及用法实例介绍
CSS 背景background使用方法
css sprite讲解与使用实例