CSS截取字符串,兼容浏览器
生活随笔
收集整理的這篇文章主要介紹了
CSS截取字符串,兼容浏览器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今天在經(jīng)典論壇看到有同學(xué)問到CSS截取字符多余省略號代替的求助且要兼容FF...
這個的確是個比較頭痛的問題，現(xiàn)在我在的公司都是程序截取顯示省略符的。兼容是沒問題，但在中文和數(shù)學(xué)或字母混排時，就會有點小小的視覺缺陷。在程序截取中：中文、數(shù)字、字母都是算的一個字符，而中文占用寬度要寬，因此混排在視覺上會導(dǎo)致寬度不一就截取多余顯示省略號了。。。
于是琢磨著一種方法如下：運用了切圖技巧和CSS技巧最終實現(xiàn)兼容效果。哈哈！
?
代碼 <!DOCTYPE html><head>
<meta charset="utf-8" />
<meta name="author" content="龐淦...">
<meta name="keywords" content="關(guān)鍵字...">
<meta name="description" content="網(wǎng)站描述...">
<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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/radom/archive/2011/01/05/1926463.html
總結(jié)
以上是生活随笔為你收集整理的CSS截取字符串,兼容浏览器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《清夜琴兴》第八句是什么
- 下一篇： STL vector list dequ