关于Firefox下截取后省略号的问题

2016-04-19 css教程跟版网

今天在用到text-overflow的ellipsis属性得时候，突然发现原来FF下是没有省略号得（才发现，汗）。不想把这个问题交给后台或者用JS来做了，于是找了个折中的办法，就是:after伪类来模拟FF下的省略号。具体做法就是给content一个的值，然后hack解决宽度问题，这

今天在用到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"></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:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/*

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可以正确解释，会导致页面没按要求显示！搜索了一下，找到了一个针对IE7、IE8不错的hack方式，IE7使用*+html或*line

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样[code]margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code]按这个顺序，刚好区分开三个浏览器

栏目导航

html教程 css教程前端开发 cms教程 seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发 php编程 java编程建站技巧 Python编程

最新文章

热门文章

热门标签

织梦资讯网织梦模板 dede 外语学校织梦鬼故事竞价网站源码竞价培训网门户网站织梦二次开发织梦笑话网 dedecms笑话网织梦源码网站建设搞笑图片织梦教程旅游网站源码织梦旅游网学校培训 html5 企业织梦源码医院源码后台样式移动营销页整形医院大学医院新手建站客服代码洗衣机维修企业网站淘宝客导航菜单教育网站学校源码装修网站装修模板美容整形女性健康妈妈网机械源码建站公司珠宝首饰苹果网站手机资讯美女图片织梦模版打包妇科源码安卓市场源码男性时尚网健康之家 app应用网站笑话网站下载站美女图片网中医院网站家装网站源码 QQ网站标牌网站魔兽世界网淘宝客源码 YY网站源码别墅设计网站服装搭配网宝宝起名网站长网站婚庆网站脑科医院源码笑话源码肝胆医院意外怀孕源码工作室