CSS截取字符串,多余文字省略号显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS截取字符串,多余文字省略号显示相关的知识，希望对你有一定的参考价值。
<style type="text/css">
body
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
div
width:200px;
height:24px;
line-height:24px;
overflow:hidden;
border:#ccc solid 1px;
background-color:#F9F9F9;
margin:5px;
div a
color:#000;
display:block;
padding-right:7px;
background:url(http://www.365css.cn/example/ellipsis_365css.cn/ellipsis.gif) no-repeat right bottom;
</style>
<div><a href="#">CSS截取字符串，超出用省略号代替</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号代替</a></div>
<div><a href="http://www.hi.baidu.com/fzlibei" target="_blank">CSS</a></div>
<div><a href="http://www.hi.baidu.com/fzlibei" target="_blank"><span></span></a></div>
我看不明白上面的代码，请帮忙写下注释~！
还有把省略号的图片换成字符串~！
谢谢~！
<style type="text/css">
body
font-family:Arial, Helvetica, sans-serif; /* 字体种类*/
font-size:12px;/*字体大小*/
div
width:200px; /*容器宽度*/
height:24px;/*高度*/
line-height:24px;/*行高*/
overflow:hidden;/*超出部分 隐藏*/
border:#ccc solid 1px;/*容器边框,1像素,颜色是#ccc(淡灰)*/
background-color:#F9F9F9;/*背景色*/
margin:5px;/*上下左右全空5像素*/
div a
color:#000;/*链接颜色*/
display:block;/*转化为区块*/
padding-right:7px;/*右缩进7像素*/
background:url(http://www.365css.cn/example/ellipsis_365css.cn/ellipsis.gif) no-repeat right bottom; /*背景图片,右下显示,只显示一次*/
</style>
<div><a href="#">CSS截取字符串，超出用省略号代替</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号代替</a></div>
<div><a href="http://www.hi.baidu.com/fzlibei" target="_blank">CSS</a></div>
<div><a href="http://www.hi.baidu.com/fzlibei" target="_blank"><span></span></a></div> 参考技术A
使用text-overflow属性可实现css截取字符串功能。
示例：
上面的样式会将id为test的元素超出20像素之外的文字隐藏，并替换为三个英文半角的句号...
text-overflow主要支持2个值：ellipsis为显示省略号，clip为修剪文本，是默认值。
white-space:nowrap;的作用是不让元素中的内容折行，在一行显示。
overflow:hidden;为溢出隐藏，目的是超过元素宽高的部分不再显示。
width:20px;设置了元素的宽度，内容超出这个宽度后会显示省略号。
最好在服务端截取字符串好些。
客户端js应该也能行吧，没见过，呵呵。 参考技术C padding-right:7px;让链接的右边产生7像素空白
background:url(ellipsis.gif) no-repeat right bottom;给链接定义一个背景图，在链接的右边显示，不重复 参考技术D 直接QQ我或HI我吧，这上面不好说
290794459 注明百度
css / js 控制 文本溢出 省略号显示
要求：
1.兼容 IE6 / IE7 /FireFox
2.文本对象:table里的文本，不能换行
3.如果采用js截取，支持resize,并保证页面执行效率
4.确保firefox下省略号的出现
补充：最好使用css控制，如果使用after,希望不出现换行的现象，先提供50分，如果满足需求将追加200分
谢谢1楼，不过像你说的有两个问题，一个firefox下省略号一直都有，另外想中英文混合的，截取宽度要设置就比较麻烦了，不会设置的刚好能让截取的完整!
function initMozTextOverflow(obj)
function re_render()
doMozTextOverflow(obj);
setTimeout(re_render,0);
function doMozTextOverflow(obj)
function _overflow(e)
var el = e.currentTarget;
el.className="_textOverflow";
function _underflow(e)
var el = e.currentTarget;
el.className="_textUnderflow";
obj.className="_textUnderflow";
obj.addEventListener("overflow", _overflow, false);
obj.addEventListener("underflow", _underflow, false);
obj.ins = document.createElement("ins");
obj.ins.innerHTML="…";
obj.appendChild(obj.ins);
obj.onmousedown = function(e)
this.selectStartX = e.clientX - document.getBoxObjectFor(this).x;
obj.onmouseup = function(e)
this.selectStartX = null;
obj.onmousemove = function(e)
if(this.selectStartX!=null )
var mx = e.clientX - this.selectStartX;
var ex = this.offsetWidth - this.selectStartX;
if( ( ex - mx) < (this.ins.offsetWidth+3) )
if(this.className!="_textUnderflow")
this.className="_textUnderflow";
this.scrollLeft=0;
var box = document.createElement("input");
box.setAttribute("type","text");
box.value=1111
this.appendChild(box);
box.select();
this.removeChild(box);
this.focus();
else
if(this.className!="_textOverflow")
this.className="_textOverflow"
return false;
;
</script>
<style>
bodyfont-family:Verdana;
pcolor:#FF0099;font-size:0.78em;margin:0.5em;
/*Sample 1*/
.textOverflowwidth:50%;border:solid 1px #222222;
.textOverflow div
height:1.5em;
position:relative;
font-size:0.78em;
width:95%;
border-bottom:solid 1px #aaaaaa;
padding:2px;white-space:nowrap;
overflow:hidden;
margin:2px 0;
text-overflow:ellipsis;
-moz-binding:url("moz-text-overflow.xml#XBLDocument");/*Extensible Biding Language for Firefox*/
.textOverflow div insposition:absolute;right:0;bottom:-0.2em;width:1.5em;text-align:right;height:2em;min-width:41px;text-decoration:none;background:url(text-fade.png) repeat-y;display:none;
.textOverflow div._textUnderflowoverflow:auto
.textOverflow div._textUnderflow insdisplay:none;
.textOverflow div._textOverflowoverflow:hidden;
.textOverflow div._textOverflow insdisplay:block;
table.textOverflowtable-layout:fixed;
</style>
<h3>Demo - Listing</h3>
<ol class="textOverflow">
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In molli End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In m End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. End!</div></li>
<li><div>sit amet, consectetuer adipiscing el End!</div></li>
<li><div>sit amet, consectetuer adipiscin End!</div></li>
<li><div>sit amet, consectetuer adipi End!</div></li>
<li><div>sit amet, consectetuer a End!</div></li>
<li><div>sit amet, consectetu End!</div></li>
<li><div>sit amet, consec End!</div></li>
<li><div>sit amet, co End!</div></li>
<li><div>sit amet End!</div></li>
<li><div>sit End!</div></li>
<li><div> End!</div></li>
</ol>
<h3>Demo - DataGrid</h3>
<table class="textOverflow">
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In molli End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In m End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing el End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscin End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipi End!</div></td></tr>
<tr><td><div>sit amet, consectetuer a End!</div></td></tr>
<tr><td><div>sit amet, consectetu End!</div></td></tr>
<tr><td><div>sit amet, consec End!</div></td></tr>
<tr><td><div>sit amet, co End!</div></td></tr>
<tr><td><div>sit amet End!</div></td></tr>
<tr><td><div>sit End!</div></td></tr>
<tr><td><div> End!</div></td></tr>
</table>
另外补充table其实用css可以免去<div>这个标签也能够实现省略号效果,不过同样道理只能在ie才能出现省略号,所以这里不适用,如果你有兴趣可以睇下面我发表过既回答,见下面参考资料地址.
参考资料：http://zhidao.baidu.com/question/78317128.html
参考技术Acss3就可以实现：代码如下
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>百度知道--郭凯旗</title>
<style>
#d1 text-overflow:ellipsis; /*这里有两种方式，目前默认为显示省略号...还有一个是clip意思是直接切除哪怕半个字*/
overflow:hidden; /*这里指的是多余的文本直接隐藏*/
white-space:nowrap; /*这里的意思是强制一行内显示*/
width:200px; /*容器的宽度为200px*/
</style>
</head>
<body>
<div id="d1">
这里是检验省略号的看看能不能用（这里是省略号）
</div>
</body>
</html> 参考技术B <!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>css文字截取</title>
<style type="text/css">
bodyfont-size:13px;color:#8c966b;
divclear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;
div acolor:#8c966b;text-decoration:none;
div a:hovertext-decoration:underline;
div adisplay:block;width:310px;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow:ellipsis; /* for IE */
div:aftercontent:"...";padding-left:3px;font-size:12px;/* for Firefox */
</style>
</head>
<body>
<div><a href="">用css来实现自动截取文字，不需要后台程序和JS的使用</a></div>
<div><a href="">好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。</a></div>
<div><a href="">不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。</a></div>
<div><a href="">另外在设置截取宽度的时候，要注意，尽量让文字截取完整</a></div>
</body>
</html>本回答被提问者采纳
以上是关于CSS截取字符串,多余文字省略号显示的主要内容，如果未能解决你的问题，请参考以下文章