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

今天在经典论坛看到有同学问到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>

转载于:https://www.cnblogs.com/radom/archive/2011/01/05/1926463.html

CSS截取字符串,兼容浏览器相关推荐

js截取字符串兼容中英文
js截取字符串兼容中英文 /** * js截取字符串,中英文都能用 * @param str:需要截取的字符串 * @param len: 需要截取的长度 */ cutstr(str, len) { ...
使用Css截取字符串
white-space:nowrap; /* 禁止自动换行 */ overflow:hidden; /* 隐藏溢出的内容 */ text-overflow:ellipsis; /* 溢出文本使用... ...
CSS 中为了兼容浏览器的前缀
-ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transfor ...
mysql 字符串用省略号_CSS截取字符串自动补充省略号
在页面中截取字符串并不一定非得用程序来实现截取,用CSS一样是可以实现字符串的截取的.并且用程序截取中英文混合的字符串时会发生截取的长度长短不一的情况,而用css截取就不会有这种问题.下面和大家分享一 ...
php兼容编码,PHP截取字符串编码（兼容utf-8和gb2312）
昨天晚上和今天上午看了字符编码的问题,还有一些别人截取字符串的函数,自己也写了一个,兼容utf-8和gb2312的 //截取字符串长度.支持utf-8和gb2312编码.若为gb2312,先将其转为u ...
转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞 ...
截取字符串后几位 php,字符串截取的几种办法（php，js，css三种）
可能没什么含量,求少拍砖. 首先是PHP版本的. 其实只用mb_strimwidth一个函数就可以了,该函数的说明如下: mb_strimwidth - 获取按指定宽度截断的字符串 string mb ...
HTMLCSS学习笔记（二十九）——CSS Sprites的原理浏览器兼容
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式(页脚精灵图.雪碧图).它允许你将一个页面涉及到的所有零星图片都包含到一张大图中.这样一来,浏览器在加 ...
兼容浏览器的insertAdjacentHTML
添加HTML内容与文本内容以前用的是innerHTML与innerText方法, 最近发现还有insertAdjacentHTML和 insertAdjacentText方法, 这两个方法更灵活,可以 ...

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

CSS截取字符串,兼容浏览器相关推荐

最新文章

热门文章