CSS截取字符串,兼容浏览器

news/2024/9/22 5:38:39

今天在经典论坛看到有同学问到CSS截取字符多余省略号代替的求助且要兼容FF...

这个的确是个比较头痛的问题，现在我在的公司都是程序截取显示省略符的。兼容是没问题，但在中文和数学或字母混排时，就会有点小小的视觉缺陷。在程序截取中：中文、数字、字母都是算的一个字符，而中文占用宽度要宽，因此混排在视觉上会导致宽度不一就截取多余显示省略号了。。。

于是琢磨着一种方法如下：运用了切图技巧和CSS技巧最终实现兼容效果。哈哈！

代码

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="author" content="庞淦...">
<meta name="keywords" content="关键字...">
<meta name="description" content="网站描述...">
<meta name="robots" content="all" />
<title>CSS截取字符串,兼容浏览器</title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre{margin:0;padding:0;}
body{font:12px/1.231 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;color:#333;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:bold;}
a{color:#333;text-decoration:none;outline:none;}
a:hover{color:#23930c;text-decoration:underline;}
textarea,select,input,button,label{vertical-align:middle;font-size:12px;}
button{background:none;border:none;cursor:pointer}
address,cite,code,em,var,abbr,acronym{font-style:normal;}
pre{font-size:12px;text-align:center;white-space:pre-wrap;word-wrap: break-word;}
table{border-collapse:collapse;table-layout:fixed}
div,li,dt,dd,p,pre,td,th{word-wrap:break-word;word-break:break-all;}
ol,ul{list-style:none;}
li{list-style-position:outside}
img{border:none;}
/*clear float*/
.clearfix{clear:both;height:1%;display:table;display:inline-block;}
.clearall{overflow:hidden;_zoom:1;}
.clear{clear:both;font-size:0;height:0;line-height:0;}
/*newsListBar*/
.newsList{width:200px;}
.newsList li{height:24px;padding:0 5px;margin:5px;vertical-align:top;border:#ccc solid 1px;line-height:24px;overflow:hidden;background-color:#F9F9F9;}
.newsList li a{display:block;padding-right:7px;background:url(http://www.365css.cn/example/ellipsis_365css.cn/ellipsis.gif) no-repeat right bottom;}
</style>
</head>
<body>
<ul class="newsList">
<li><a href="javascript:void(0)">CSS截取字符串，超出用省略号代替</a></li>
<li><a href="http://www.4sonline.com.cn/web4s/index.jsp">CSS截取字符串</a></li>
<li><a href="http://www.4sonline.com.cn/web4s/index.jsp">365CSS</a></li>
<li><a href="http://www.4sonline.com.cn/web4s/index.jsp">http://www.4sonline.com.cn/web4s/index.jsp</a></li>
</ul>
</body>
</html>