firefox中text-overflow:ellipsis的问题

本文探讨了在使用easyui的treegrid组件时,遇到的text-overflow:ellipsis样式在Chrome和Firefox浏览器中表现不一致的问题。在Chrome中,当字段宽度不足且名称过长时,内容会被正确地截断并显示省略号;然而在Firefox中,该样式可能无法正常工作,导致字段名称显示不全。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【2016年5月26日  easyui  css】

在使用easyui treegrid进行数据加载的过程中,当字段的宽度过小,字段名称过长时在不同浏览器的显示行为不一样,具体如下:

chrome:                                                                  IE / firefox:

                      

css中有专门的属性来实现文字过长时出现文字+...的情况,firefox早期的版本不太支持,但是最新版44之后都支持,给父类设置如下的样式,当长度超过时会出现我们要求的效果:
width: 200px;    
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
项目中出现如上chrome和firefox的样式都不是我们想要的,用webDeveloper查看当前样式,父类的样式符合上述规范,但是子类的span被设置了display:inline-block;属性,所以上述对于文字的css样式设定不起作用,还原为行内元素即可。即下面改为display:inline即可。

修改之后的效果图如下:
但是再深入思考,发现在firefox中使用上述规则后效果为隐藏,而不是直接出现...
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>text-overflow示例</title>
    <style>
        #test{
            width: 200px;    
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			word-wrap: normal;
			border:1px solid red;
        }
		.span01{
			
		}
    </style>
</head>
<body>
    <div id="test"><span class="span01">this is a long lo ng story,this aidj kjdisnnnnnnnnn<span></div>
</body>
</html>

各浏览器现象(自动截断而非直接...):

 基于上述现象,所以引起此次现象的原因有可能是不同浏览器对easyui treegrid的不同支持和渲染,这个有待进一步排查和思考。持续更新以记录之。





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值