文本过长后,显示省略号。ff特有的hack方法。

看了这篇文章,http://www.w3cplus.com/content/css3-text-overflow

记一下要点:

.text-overflow-ellipsis {   
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
  }
text-overflow必须配合下面两个css才能正确。

但火狐不支持,但经测试,最新版本是支持的。不过下面的hack方法,在火狐下也是支持的。这样就可以对火狐特殊的样式进行设置。

/*Firefox实现效果*/
 @-moz-document url-prefix(){	
   .text-overflow span {     
    max-width: 70px;/* 在FF下改变内容宽度,用来放置:after增加的内容(...)*/
    float: left;/*进行浮动*/
   }
 } @-moz-document url-prefix(){	
   /*利用:after增加(...)省略符*/
   .text-overflow:after {      content:"...";/*增加省略符号*/
      float: left;/*设置浮动*/
      width: 25px;/*省略符宽度*/
      padding-left: 5px;/*省略符内距,用来拉开内容之间的距离*/
      color: #000;
   }
 }
@-moz-document url-perfix(){}是firefox的一个独有属性,只有firefox浏览器能识别,也可以说是一种hack*/
  @-moz-document url-prefix(){	
     css选择器 {
       css样式设置
     }
   } 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

32870
来自专栏全栈

前端工程化(三)---Vue的开发模式

17730
来自专栏姬小光

姬小光前端小讲堂【第002期】

在上一期“然并卵的 Hello World !”(聊天界面回复 001)发出之后,同学们的反应跟我的预期出奇的一致,那就是然!并!卵!

12420
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

57250
来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

44850
来自专栏吴老师移动开发

Flutter ScrollView上拉加载更多关于学习

2018.05.07 更新 上拉加载可以不用Notification,直接用ScrollController,代码如下:

70030
来自专栏全沾开发(huā)

React-native踩坑小记

React-native踩坑小记 最近开始研究ReactNative咯,大概一两周了吧已经,略略说一下遇到的一些坑爹问题 问题一般都...

78580
来自专栏前端新视界

如何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如...

9500
来自专栏吴裕超

点击穿透原理及解决

一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行...

80860
来自专栏web编程技术分享

【手把手】制作一个简单的HTML网页

1.2K90

扫码关注云+社区

领取腾讯云代金券