html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
无hack无js全兼容text-overflow-ellipsis效果
时间:2016-04-19
超过宽度显示省略号(无js无hack全兼容) .
PS. 由于使用的附件作为图片,使用其他浏览器测试时,保证登录才能看到完整效果。或者
点此下载
(感谢by0001提供的下载包)
^-^ 三更半夜果然适于思考,办法有点怪,让我们先看看效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无hack无js全兼容text-overflow-ellipsis效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <style> * { margin:0; padding:0;} body { background:#fff;} .list ul { font-size:12px; font-family:simsun; text-align:left; line-height:18px;} .list a { color:#000; text-decoration:none; word-break:break-all;} .list div { position:relative; zoom:1; padding-left:1em; background:url(/articleimg/2009/03/6494/ico.gif) no-repeat 3px 6px;} .list span { position:absolute; right:-10px; bottom:0; height:18px; width:10px; background:#fff; overflow:hidden;} .list li { position:relative; width:11em; background:url(/articleimg/2009/03/6494/pot.gif) right top no-repeat; height:18px; overflow:hidden; padding-right:10px; zoom:1;} .list a:hover { color:#f60;} </style> <body> <div class="list"> <ul> <li> <div> <a href="#nogo" _fcksavedurl="#nogo">该标签中字符超过十个了</a> <span></span> </div> </li> <li> <div> <a href="#nogo" _fcksavedurl="#nogo">只有六个汉字</a> <span></span> </div> </li> <li> <div> <a href="#nogo" _fcksavedurl="#nogo">该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了</a> <span></span> </div> </li> <li> <div> <a href="#nogo" _fcksavedurl="#nogo">blueidea blueidea blueidea</a> <span></span> </div> </li> </ul> </div> </body> </html>
提示:您可以先修改部分代码再运行
大家可以试试将li标签的宽度修改后进行测试。
接下来有兴趣的朋友可以看看原理的解释:
思路:
我们要达到的效果是:当“字符超过额定宽度”,则“显示三个小点”。
=> 当“字符超过额定宽度”,对于页面来说可能发生的一个改变就是:换行!
=> 换行将导致该范围的底线降低。
=> 那么,我们的目的则可以换算成:
该范围的底线降低时显示三个小点
。
英文句子和连续字母/数字测试效果在非IE下欠佳(因为不自动换行),可以配合js来完善。
有好的建议或意见,请多多指教。
上一条:页面重构工程师应该具有的技能和素质
下一条:CSS教程:语义化方法替代结构化方法
相关文章
完美解决Iframe高度自适应(兼容性好并且支持跨域)
Iframe高度自适应是一个很头疼的问题,特别是要考虑浏览器兼容性以及跨域的情况,本文章向码农介绍完美解决Iframe高度自适应(兼容性好并且支持跨域)的方法,需
CSS3动画之3D旋转书本效果
本文向码农介绍CSS3动画之3D旋转书本效果,需要的码农可以参考一下。
css 浏览器兼容性总结
本文章向码农们介绍CSS FLOAT,css 截字省略号等属性在不同浏览器的兼容性解决方法,需要的码农可以参考一下。
最全的CSS浏览器兼容问题小结
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的
13个网页页面浏览器兼容性验证工具
每天在回顾浏览ThemeForest上的模板的时候,我都会测试验证浏览器的兼容-更不用说我自己的工作。随着时间的推移,我已经收集到了网上最好的验证和浏览器兼容性测
CSS 网页文字渐变效果
本文介绍的技术很经典,也算是一篇老文章了,相信很多人也都看过,之前神飞有注意到国内有些翻译,但是不全面,这里我就将其完整的翻译了一下。
最新文章
Windows自动更新造成“HTTP Error 503,The service is unavailable。”
公司开发的某业务系统出故障了,于是通过VPN在家里直接访问该系统,结果系统器返回 Service Unavailable --------------------------------------------------------------
iframe 如何设置高度自适应 - iframe 自适应高度的方法
最近些项目遇到用iframe的地方,发现设置的固定高有时不能完全适应项目环境,不是高了就是不够高,在页面里看着很不爽。如何想办法到使用 iframe 自适应高度的方法,下面分
纯CSS打造响应式自适应分页条
在html中,怎么设置背景图片不重复不平铺,只显示一张图片
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
html hidden隐藏域作用及用法实例介绍
完美解决Iframe高度自适应(兼容性好并且支持跨域)
iframe 如何设置高度自适应 - iframe 自适应高度的方法
css margin外边距使用实例分析
css float 浮动属性使用方法和实例讲解
css sprite讲解与使用实例
CSS 背景background使用方法