怎么实现CSS限制字数，超出部份显示点点点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么实现CSS限制字数，超出部份显示点点点相关的知识，希望对你有一定的参考价值。
width:150px;/*要显示文字的宽度*/overflow:hidden; /*超出的部分隐藏起来。*/ white-space:nowrap;/*不显示的地方用省略号...代替*/text-overflow:ellipsis;/* 支持 IE */ 参考技术A display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;在火狐里 怎样用CSS限制字数并以点的形式显示
我定义的限制样式，只在IE浏览器中有作用，火狐不行
哪位高手来指点啊！
.newlimit li
width:22em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
<head>
<style type="text/css">
body
font-family:Arial, Helvetica, sans-serif;/*字体。*/
font-size:12px;/*字体大小12像素。*/
div
width:200px;/*层的宽度。*/
height:24px;/*层的高度。*/
line-height:24px;/*行间距。*/
border:#ccc solid 1px;/*层边框为1像素灰色的实线。*/
background-color:#F9F9F9;/*背景颜色*/
margin:5px; /*距离周围都是5像素*/
div a
color:#000;/*超文字超链接的颜色*/
display:block;/*定义为块级*/
width:150px;/*要显示文字的宽度*/
float:left;/*左对齐*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
padding-right:7px; /*文字距离右侧7像素。*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera */
div:aftercontent:"...";/* 支持 Firefox */
</style>
</head>
<body>
<div><a href="#">CSS截取字符串，超出用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号代替</a></div>
</body>
</html> 参考技术A 您好！很高兴为您答疑！
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切
（clip这个参数是不常用的！）
ellipsis : 当对象内文本溢出时显示省略标记（...）
代码如下：
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。 参考技术B text-overflow:ellipsis;
这个属性本身火狐不认识。
我之前也碰到过这个问题，并且研究过firefox的实现，最后得出的结论是我搜遍了网络也没有找到一个合适的办法解决省略号兼容各个浏览器的问题。大家的解决办法都或多或少有瑕疵。
最后如果LZ非要这么用，可以用js来控制。
附网上的一个js控制代码，仅供参考：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS test</title>
<style type="text/css">
*
margin:0;
padding:0;
body
padding:10px;
font-family:Arial;
#ididid
width:150px;
line-height:20px;
overflow:hidden;
border:1px solid #999;
</style>
</head>
<body>
<script type="text/javascript">
function testAuto(thisId,needLeng)
var ididid = document.getElementById(thisId);
var nowLeng = ididid.innerHTML.length;
if(nowLeng > needLeng)
var nowWord = ididid.innerHTML.substr(0,needLeng)+'...';
ididid.innerHTML = nowWord;
</script>
<div id="ididid">12345678901234567890test test test test test test test test test test test test test test test test test test test test test test test</div>
<script type="text/javascript">
testAuto('ididid',15)
</script>
</body>
</html> 参考技术C 火狐浏览器下面目前没有好的方法能通过 CSS 样式来让溢出(overflow)的字符显示成省略号(...)
网上有通过js来截断字符变替换成省略号(...)的办法,但是对于中文字符因为是4个字节,所以可以会出现乱码.
像这样需要显示省略号其实可以用兼容性更好的办法,本人认为可以做一个alpha透明的gif图片,上面有省略号,将这个newlimit的li右补丁10个像素,然后给这个newlimit的li加一个background的CSS属性,在right center位置把做好的透明gif图片加上.
还有一种是通过content: "..."的CSS 属性来加入,但是这种方法在IE 6下面有兼容性问题(可恶的IE6),所以用图片是兼容性最好的.
参考资料：个人心得
参考技术D 用css你也只能是overflow掉一些，怎么能达到你要的效果呢，这是用js解决的，多注意点基础，不要张冠李戴以上是关于怎么实现CSS限制字数，超出部份显示点点点的主要内容，如果未能解决你的问题，请参考以下文章