繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 无hack无js全兼容text-overflow-ellipsis效果
- CSS样式表
- css 块状元素和内联元素
- CSS 盒模型、块状元素与内联元素、CSS选择器
- css 浮动 理解Float的含义
- CSS 清除浮动Clear
- CSS 制作网页导航条(上)
- CSS 制作网页导航条(下)
- css 浮动(float)页面布局
- css 浮动(float)页面布局(下)
- css position 定位
- css 定位应用实例
- CSS Hack 有关浏览器兼容方面
- css 单图片按钮实例(css 图片变换)
- 使用X-UA-Compatible来设置IE浏览器兼容模式
- div overflow 超出隐藏属性使用说明
- CSS 使用规则总结
- div+CSS 兼容小摘
- CSS的inherit与auto使用分析
- 如何组织和注释CSS文件
- CSS样式按整洁易懂的结构组织
- CSS Prism 查看和编辑CSS中用到的颜色
CSS样式表 中的 无hack无js全兼容text-overflow-ellipsis效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 53 ::
收藏到网摘: n/a
PS. 由于使用的附件作为图片，使用其他浏览器测试时，保证登录才能看到完整效果。或者 点此下载（感谢by0001提供的下载包）
^-^ 三更半夜果然适于思考，办法有点怪，让我们先看看效果：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
大家可以试试将li标签的宽度修改后进行测试。
接下来有兴趣的朋友可以看看原理的解释：
思路：
我们要达到的效果是：当“字符超过额定宽度”，则“显示三个小点”。
=> 当“字符超过额定宽度”，对于页面来说可能发生的一个改变就是：换行！
=> 换行将导致该范围的底线降低。
=> 那么，我们的目的则可以换算成：该范围的底线降低时显示三个小点。
英文句子和连续字母/数字测试效果在非IE下欠佳（因为不自动换行），可以配合js来完善。
有好的建议或意见，请多多指教。
评论 (0) All
