解决text-overflow: ellipsis;不生效的问题

按照text-overflow: ellipsis;使用规则,在标签样式中添加该属性未生效,例如:
写道
.text {
text-overflow: ellipsis;
}

<div class="text">长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</div>

     之后,发现并没有达到我们想要的预期效果,其实还需要另外2个CSS属性的支持:

写道
.text {
text-overflow: ellipsis;
white-space: nowrap; 
overflow: hidden;
}

<div class="text">长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</div>

     其中,white-space是设置文本不换行,overflow设置标签超出部分自动隐藏,另外提醒,该CSS属性在某些浏览器上不生效,如果不需要照顾不兼容的浏览器,比如IE,可以放心大胆使用。

当把text-overflow设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,不过在表格里面使用text-overflow后依旧不能隐藏超出的文本,具体解决方法祥看本文
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap(强制文本在一行内显示)及overflow:hidden(溢出内容为隐藏),也就是要同时有

 代码如下:


text-overflow:ellipsis或clip; 
white-space:nowrap; 
overflow:hidden; 

因为之前有用过不少次这个属性,而且用得也都很顺利,所以最近在弄一些table的时候遇到了td内的内容太多而出现换行从而影响整体的美观的问题,所以我想把文本不换行而且让超出的文本能显示为省略号,于是我就很自然的就去用了上面那三属性并且也为td设置了长度和宽度,结果神了奇,一直没把超出的文本内容给换成省略号,尝试排除了各种我觉得有可能的影响后依旧不能解决,于是我只好去google一下,后来终于找到了原因,就是要在table的样式里定义一个属性 table-layout:fixed,综上,要想解决表格里面使用text-overflow后依旧不能隐藏超出的文本的问题,就必须完整的使用下面这些属性
代码如下
td{ 
text-overflow:ellipsis或clip; 
white-space:nowrap; 
overflow:hidden; 
width:**px; 

table{ 
table-layout:fixed; 
}
还有如果想鼠标移动上去时显示被隐藏的文本内容,还可以设置
代码

td:hover 

text-overflow:inherit; 
overflow:visible; 
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/437873.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python CheckiO 题解】Bird Language

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

Python CheckiO 题解系列 丨 博客目录索引

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本题解系列主要记录自己在用 Python 闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 …

文带你深入了解 Redis 内存模型

前言 Redis是目前最火爆的内存数据库之一&#xff0c;通过在内存中读写数据&#xff0c;大大提高了读写速度&#xff0c;可以说Redis是实现网站高并发不可或缺的一部分。 我们使用Redis时&#xff0c;会接触Redis的5种对象类型&#xff08;字符串、哈希、列表、集合、有序集合…

【Python CheckiO 题解】Pawn Brotherhood

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

【Python CheckiO 题解】Xs and Os Referee

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

c#多线程总结(纯干货)

线程基础 创建线程 static void Main(string[] args) {Thread t new Thread(PrintNumbers);t.Start();//线程开始执行PrintNumbers();Console.ReadKey(); }static void PrintNumbers() {Console.WriteLine("Starting...");for (int i 1; i < 10; i){Console.Wr…

Hexo 博客优化之实用功能添加系列(持续更新)

2022-01-25 更新&#xff1a;博客新地址&#xff1a;https://www.itbob.cn/&#xff0c;文章距上次编辑时间较远&#xff0c;部分内容可能已经过时&#xff01; 本文将讲述一些 Hexo 博客实用功能的添加&#xff0c;本文以作者 luuman 的 spfk 主题和作者 xaoxuu 的 Material X…

SharePoint关于publish page, WiKi page, Web part page区别

并非所有页面类型都相似 让我们来重新理解一下关于这三种页面的问题&#xff0c;自己找了很多文章并没有找到很好的介绍。 尽可能简单&#xff0c;SharePoint页面是您的用户内容显示的地方。您可以将其比喻成SharePoint站点的“脸和身体”。因此&#xff0c;当你访问SharePoi…

【Python CheckiO 题解】The Warriors

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

【Python CheckiO 题解】Multiply (Intro)

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

SQL Server定时执行SQL语句

企业管理器 --管理 --SQL Server代理 --右键作业 --新建作业 --"常规"项中输入作业名称 --"步骤"项 --新建 --"步骤名"中输入步骤名 --"类型"中选择"Transact-SQL 脚本(TSQL)&…

关于DateTime的一点记录 ToString(yyyy-MM-dd HH:mm:ss)

DateTime dt DateTime.Now; string z dt.ToString("yyyy-MM-dd HH:mm:ss");//你知道这个是“年月日时分秒”的格式吧? string a dt.ToString("yyyy-MM-dd HH:mm:ss ms");//这个你认为一定是 毫秒的格式? string b dt.ToString("yyyy-MM-dd HH:…

【Python CheckiO 题解】Say Hi

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

C#语言之“string格式的日期时间字符串转为DateTime类型”的方法

方法一&#xff1a;Convert.ToDateTime(string) string格式有要求&#xff0c;必须是yyyy-MM-dd hh:mm:ss 方法二&#xff1a;Convert.ToDateTime(string, IFormatProvider) DateTime dt; DateTimeFormatInfo dtFormat new System.GlobalizationDateTimeFormatInfo(); dtF…

【Python CheckiO 题解】Easy Unpack

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

SharePoint List item数量超过5000的解决办法

SharePoint一个list里面的item数量超过5000会提示“视图无法显示&#xff0c;因为超过管理员限制设定的列表视图阈值” 在CSDN里面有比较好的解决方案&#xff0c;在这里先记录下来&#xff0c;以后有用 方案一&#xff0c;定期自动归档 不用写TimerJOb&#xff0c; 可以用cont…

【Python CheckiO 题解】Index Power

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

什么是SharePoint?

在聊SharePoint开发之前&#xff0c;有必要说下什么是SharePoint. 在我工作的过程中&#xff0c;经常遇到客户对SharePoint不太了解的情况。有客户说&#xff0c;SharePoint太烂了&#xff0c;DropBox能做到的什么什么功能&#xff0c;SharePoint竟然做不到&#xff0c;很明显…

【Python CheckiO 题解】Digits Multiplication

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…

【Python CheckiO 题解】Secret Message

CheckiO 是面向初学者和高级程序员的编码游戏&#xff0c;使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务&#xff0c;从而提高你的编码技能&#xff0c;本博客主要记录自己用 Python 在闯关时的做题思路和实现代码&#xff0c;同时也学习学习其他大神写的代码。 Chec…