Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >文本过长后,显示省略号。ff特有的hack方法。

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

作者头像
申君健
发布于 2018-09-21 07:35:21
发布于 2018-09-21 07:35:21
61900
代码可运行
举报
文章被收录于专栏:前端侠2.0前端侠2.0
运行总次数:0
代码可运行

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

记一下要点:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.text-overflow-ellipsis {   
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
  }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
text-overflow必须配合下面两个css才能正确。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*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;
   }
 }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@-moz-document url-perfix(){}是firefox的一个独有属性,只有firefox浏览器能识别,也可以说是一种hack*/
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  @-moz-document url-prefix(){	
     css选择器 {
       css样式设置
     }
   } 
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014/08/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
翻译:如何使用CSS实现多行文本的省略号显示
本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解。 合理的截断多行文本是件不容易的事情,我们通常采用几种方法解决: overflow: hidden直接隐藏多余的文本 text-overflow: ellipsis只适用于单行文本的处理 各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流(relayout)后的布
欲休
2018/03/15
2.8K0
翻译:如何使用CSS实现多行文本的省略号显示
关于FF下截取后省略号的问题
本文讲述了一位同学在排查关于FF下截取后省略号的问题时,发现使用text-overflow:ellipsis属性无法在FF下实现省略号效果。他通过使用:after伪类来模拟FF下的省略号,并给content一个…的值,hack解决宽度问题,从而让样式看起来更舒服。同时,提醒可能有更好得办法解决此问题。
练小习
2017/12/29
6280
HTML内超过多少像素以省略号显示
该文介绍了在HTML中如何用CSS和JavaScript实现控制文字显示,包括控制文字长度和显示省略号等。
高爽
2017/12/28
1.3K0
【黄啊码】css 文本两行显示,超出省略号表示
 重点:text-overflow: ellipsis;只对display:inline;起作用
黄啊码
2022/06/15
6710
【黄啊码】css 文本两行显示,超出省略号表示
css怎么设置超出显示省略号
1.使用“overflow:hidden;”语句把超出的部分隐藏起来; 2.使用“text-overflow:ellipsis;”语句在文本溢出包含元素时,显示省略符号来代表被隐藏的部分
小唐同学.
2024/06/13
5370
CSS控制文字,超出部分显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
山河木马
2019/03/05
3.3K0
CSS控制文字,超出部分显示省略号
文本溢出截断省略
文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。
WindRunnerMax
2020/08/27
1.7K0
【云端架构】前端CSS实现单行、多行文本溢出显示省略号
如何实现单行文本的溢出显示省略号,同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
墨色明月
2018/05/14
1.5K0
【云端架构】前端CSS实现单行、多行文本溢出显示省略号
用css实现文本溢出 超出部分隐藏显示省略号
ellipsis  : 溢出显示 ... tip : 设置 ellipsis 时需将给元素设置 overflow: hidden; 和 white-space: nowrap; ,仅限于单行文本溢出。
德顺
2019/11/13
3.2K0
用css实现文本溢出 超出部分隐藏显示省略号
前端必看!各大浏览器 CSS Hack 收集
1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以
Vicsh
2018/05/16
1.7K0
可能是最全的 “文本溢出截断省略” 方案合集
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?他们之间的差异性和场景适应性又是如何?凡事就怕较真,较真必有成长。本文试图通过编码实践,给出一些答案。
Nealyang
2019/11/13
3.5K0
可能是最全的 “文本溢出截断省略” 方案合集
55 个提高你 CSS 开发效率的必备片段
这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找? 清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我
wscats
2020/06/06
1.4K0
CSS- 文本超出指定宽度后隐藏并显示为省略号
  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   
书童小二
2018/09/03
2.8K0
CSS- 文本超出指定宽度后隐藏并显示为省略号
table文字溢出显示省略号问题
2009 年的《麻省理工科技评论》(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之一。
Daotin
2022/05/09
1.2K0
table文字溢出显示省略号问题
CSS编码规范
单行形式书写风格的排版约束 1.每一条规则的大括号 { 前后加空格 2.多个selector共用一个样式集,则多个selector必须写成多行形式 3.每一条规则结束的大括号 } 前加空格 4.属性名
HTML5学堂
2018/03/12
1.5K0
CSS编码规范
text-overflow 文本溢出显示省略号总结
注:单词与中文会自动换行,要实现单行溢出显示,必须让它不换行,使用white-space: nowrap; 可以让它不换行
用户9914333
2023/02/28
1.2K0
text-overflow 文本溢出显示省略号总结
前段:可能是最全的 “文本溢出截断省略” 方案合集
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?他们之间的差异性和场景适应性又是如何?凡事就怕较真,较真必有成长。本文试图通过编码实践,给出一些答案。
用户4962466
2019/12/05
2.2K0
文本溢出-超出文本显示为省略号
HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作的时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑文本超出的问题。 实现文本超出显示为省略号 使用CSS实现元素的文本超出隐藏,通常存在两种方式,一种是超出直接隐藏内容,另一种是超出显示为省略号。 超出隐藏 超出隐藏,只需要为一个有固定宽高设置为overflow:hidden; 单行文本超出显示为省略号 实现代码如下: <style> .text-overflow { wid
HTML5学堂
2018/03/12
2.2K0
CSS/CSS3常用Style
IE 9 及其之前的版本不支持 flex 属性。IE 10 需要前缀 -ms- 才支持该属性。
White feathe
2021/12/08
4000
CSS/CSS3常用Style
如何让超出块级元素的内容使用省略号代替?
先看上面两幅图片,如果实现上面现象该如何 .main{ width: 100px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; } <div class="main"> 1111111111111111111111111111111111111111 </div> 必须overflow:hidden;和text-overflow:ellipsis组合才可以实现上述效果 ove
潇洒哥和黑大帅
2018/10/23
1.5K0
如何让超出块级元素的内容使用省略号代替?
相关推荐
翻译:如何使用CSS实现多行文本的省略号显示
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文