文字超过宽度显示省略号（无js全兼容）

英文句子和连续字母/数字测试效果在非IE下欠佳（因为不自动换行），可以配合js来完善。
有好的建议或意见，请多多指教。
以下是优化过的版本
此次修改主要的优化方面如下：
1. 去掉了div标签，结构更加紧凑。
2. 将宽度范围的设定移至外框，具有更强的可移植性，内部结构可以更自由调整。

<!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=gb2312″ /> <style type=”text/css”> * { margin:0; padding:0;} .list ul { font-size:12px; font-family:simsun; text-align:left; line-height:18px; width:11em; background:#fff; } .list li{ height:18px; overflow:hidden; position:relative; padding-left:1em; background:url(http://img.jb51.net/images/ico.gif) no-repeat 3px 6px; } .list a{ display:block; padding-right:1em; background:url(http://img.jb51.net/images/pot.gif) right top no-repeat; position:relative; zoom:1; word-break:break-all; } .list a span { position:absolute; right:0em; bottom:0; height:18px; width:1em; background:#fff; overflow:hidden; } </style> </head> <body> <div class=”list”> <ul> <li><a href=”#nogo”>该标签中字符超过十个了</a></li> <li><a href=”#nogo”>只有六个汉字</a></li> <li><a href=”#nogo”>该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了</a></li> <li><a href=”#nogo”>blueidea blueidea blueidea</a></li> </ul> </div> </body> </html> 
提示：您可以先修改部分代码再运行
原理图

优化版本与无优化版本打包下载

2/2 首页上一页 1 2

文字超过宽度显示省略号（无js全兼容）

H5页面使用audio标签播放音频

2345手机助手怎么下载音乐/铃声 2345手机助手下载音

靠谱助手怎么ROOT 靠谱助手一键root图文教程

js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明

安卓模拟器bluestacks安装不了解决办法

CSS填充和宽高详解

photoshop打造真人手绘图

XSplit登陆慢、无法登陆的解决办法

电子书制作排版教程

PP加速器新窗口独立视频功能