大佬教程收集整理的这篇文章主要介绍了css – 使用RTL在左侧使用文本溢出省略号的几个浏览器兼容性问题,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
CSS:
#mydiv { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; direction:rtl; }
HTML:
<div id="mydiv">foobar foobar foobar</div>
当#mydiv比其内容更窄时,应该出现如下内容:
但是,根据我的判断(以及对其他任何尝试此操作的人的公平警告,因为我已经看到了方向:在其他几个地方的rtl解决方案),唯一正确执行此操作的主要浏览器似乎是Firefox. Safari和谷歌浏览器都会将省略号放在文本的左侧,但无论如何都会在右侧截断,如下所示:
IE9和Opera彻头彻尾的困惑. IE在右侧截断并使文本与省略号重叠. Opera是迄今为止最有创意的,它会使溢出在单个单词上显示一段时间(因为元素变得更窄,即),然后开始截断最左边的单词,但是从右边开始.它也无法渲染省略号,在我做过的一个实验中,甚至将一个™角色一直向左移动.真.所以“foobar foobar foobar™”就变成了:
另外需要注意的是,webkit浏览器的一个(非常恼人的)潜在选项可能是设置-webkit-rtl-ordering:在左侧截断的视觉效果BUT也按字面顺序呈现相反的字符:
因此,通过浏览器或某种模糊特征嗅探,理论上可以设置该属性并动态地反转元素的文本.
是否存在简单的跨浏览器解决方法,甚至是基于JS的复杂解决方案?
Dotdotdot:
http://dotdotdot.frebsite.nl/
ThreeDots
http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/
编辑:为了清楚起见,我看到了你提到的同样问题.
以上是大佬教程为你收集整理的css – 使用RTL在左侧使用文本溢出省略号的几个浏览器兼容性问题全部内容,希望文章能够帮你解决css – 使用RTL在左侧使用文本溢出省略号的几个浏览器兼容性问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。