无hack无js全兼容text-overflow-ellipsis效果-优快云博客

本文链接：https://blog.youkuaiyun.com/spring21st/article/details/4648683

<!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" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* { 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(ico.gif) no-repeat 3px 6px; } .list a{ display:block; padding-right:1em; background:url(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" mce_href="#nogo">该标签中字符超过十个了<span></span></a></li> <li><a href="#nogo" mce_href="#nogo">只有六个汉字<span></span></a></li> <li><a href="#nogo" mce_href="#nogo">该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了<span></span></a></li> <li><a href="#nogo" mce_href="#nogo">blueidea blueidea blueidea<span></span></a></li> </ul> </div> </body> </html>

使用到的背景图片：

1. ico.gif :