Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS 文字溢出:ellipsis在IE上不起效果

CSS 文字溢出:ellipsis在IE上不起效果

作者头像
程序媛夏天
发布于 2024-01-18 13:46:39
发布于 2024-01-18 13:46:39
25310
代码可运行
举报
运行总次数:0
代码可运行

单行文本的溢出显示省略号

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行文本的溢出显示省略号

方法一:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;不兼容IE浏览器。

方法二:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
p {
    position:relative;
    line-height:20px;
    height:60px;
    overflow:hidden;
}
p::after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding-left:45px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

局限性: 该方法能在谷歌和IE浏览器上出现文字超过就省略的效果,但是不出现…省略号!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
1 条评论
热度
最新
老师您好,关于配置项定义,这个材料,可以共享吗?我是一线运维人员,您的整理特别好
老师您好,关于配置项定义,这个材料,可以共享吗?我是一线运维人员,您的整理特别好
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
CSS控制文字,超出部分显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
山河木马
2019/03/05
3.4K0
CSS控制文字,超出部分显示省略号
【云端架构】前端CSS实现单行、多行文本溢出显示省略号
如何实现单行文本的溢出显示省略号,同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
墨色明月
2018/05/14
1.6K0
【云端架构】前端CSS实现单行、多行文本溢出显示省略号
【黄啊码】css 文本两行显示,超出省略号表示
 重点:text-overflow: ellipsis;只对display:inline;起作用
黄啊码
2022/06/15
6970
【黄啊码】css 文本两行显示,超出省略号表示
Css 实现多行文字截断
看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来实现,一般来说,在做这样文字截断效果时我们更多是希望:
grain先森
2019/04/18
2.4K0
Css 实现多行文字截断
深入扩展文本溢出解决方案
在实际的开发中不管是移动端还是 PC 端都会遇到文本太长,因为宽度不够导致我们需要设置成省略号。文本就文本溢出做一个总结,希望对你们开发过程中有帮助。
小丑同学
2021/01/22
1.5K0
自定义mixin.less并全局注入至项目中
有的时候写项目,需要一些通用的css样式来实现一些功能,比如居中、渐变、单行溢出省略号、多行溢出省略号等. 项目使用的less预处理器,所以整理了一些常见的mixin函数
w候人兮猗
2020/07/01
9840
CSS 这个就叫优雅 | 多行文本溢出省略
文本溢出省略的应用场景主要分为单行以及多行两种,如果只是为了单行省略,那么实现起来简单且兼容性最好,只需要写上这三个属性。
Jensen_97
2023/07/19
1.8K0
翻译:如何使用CSS实现多行文本的省略号显示
本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解。 合理的截断多行文本是件不容易的事情,我们通常采用几种方法解决: overflow: hidden直接隐藏多余的文本 text-overflow: ellipsis只适用于单行文本的处理 各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流(relayout)后的布
欲休
2018/03/15
3K0
翻译:如何使用CSS实现多行文本的省略号显示
css3 javascript 单行和多行文本溢出截断多种方案
写在最前面 在我们日常开发中的时候经常会遇到一种业务场景,需要截断一些文字的显示。可能是一行或者两行,或者根据字数限制或者用户的显示屏幕大小来展示对应的文字。 css 篇 一:单行文本溢出处理 代码 .text-ellipsis-single{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 响应式截断,当文本溢出的时候才显示省略号。 预览codepen 情况 codepen.io/lpove/pen/M… 分
西南_张家辉
2021/02/02
1.3K0
不定高多行溢出文本省略
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。
空空云
2018/09/27
1.8K0
CSS 单/多行文本溢出样式
这样就很容易的实现了多行文本溢出显示省略号的效果,不过这个方案有个不好的点就是兼容性不好
小鑫
2022/04/24
1.8K0
用css实现文本溢出 超出部分隐藏显示省略号
ellipsis  : 溢出显示 ... tip : 设置 ellipsis 时需将给元素设置 overflow: hidden; 和 white-space: nowrap; ,仅限于单行文本溢出。
德顺
2019/11/13
3.3K0
用css实现文本溢出 超出部分隐藏显示省略号
CSS/CSS3常用Style
IE 9 及其之前的版本不支持 flex 属性。IE 10 需要前缀 -ms- 才支持该属性。
White feathe
2021/12/08
4150
CSS/CSS3常用Style
CSS 基础知识
基础用法:var(color,default),var接收两个参数,第一个是自定义样式,第二个是默认样式,当自定义颜色变量不存在时会设置成默认样式
前端小tips
2021/11/23
6440
CSS 基础知识
如何用CSS优雅地实现段落多行文本溢出隐藏?
你好,我是喵喵侠。在前端开发页面的过程中,有时候需要对段落文字进行溢出隐藏处理,特别是在内容较长的情况下。这篇文章将详细讲解如何使用CSS实现多行文字的溢出隐藏,再想到解决方法之前,你会觉得很麻烦,但有了这篇文章,你再也不用烦恼如何实现段落多行文本溢出隐藏的问题了!
喵喵侠
2024/08/05
1.2K0
如何用CSS优雅地实现段落多行文本溢出隐藏?
文本溢出截断省略
文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。
WindRunnerMax
2020/08/27
1.8K0
css 常用代码分享
3. 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框
用户7705674
2021/09/22
9500
【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
啦啦啦321
2018/01/03
2.6K0
【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
单行和多行文字溢出处理方式
程序媛夏天
2024/01/18
1940
单行和多行文字溢出处理方式
【CSS】947- 十几个 CSS 高级技巧汇总
「列举一下效果」 设置input的placeholder的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 相邻兄弟选择器之常用场景 outline属性的妙用技巧 隐藏滚动条或更改滚动条样式 纯CSS绘制三角形 虚线框绘制技巧 卡券效果制作 隐藏文本的常用两种方法 表格边框合并 「1-1. 设置input 的placeholder的字体样式」 设置input占位符的样式 input::-webkit-input-placeholder { /* Chrome/Opera/Sa
pingan8787
2021/05/14
4730
【CSS】947- 十几个 CSS 高级技巧汇总
推荐阅读
相关推荐
CSS控制文字,超出部分显示省略号
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验