<html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> body{ font-family:Arial, Helvetica, sans-serif;/*字体。*/ font-size:12px;/*字体大小12像素。*/ } div{ width:200px;/*层的宽度。*/ height:100px;/*层的高度。*/ line-height:24px;/*行间距。*/ position: relative; border:#ccc solid 1px;/*层边框为1像素灰色的实线。*/ background-color:#F9F9F9;/*背景颜色*/ margin:5px; /*距离周围都是5像素*/ } div a{ color:#000; display:block;/*定义为块级*/ width:190px;/*要显示文字的宽度*/ float:left;/*左对齐*/ overflow:hidden; /*超出的部分隐藏起来。*/ line-height: 30px; height: 60px; font-size: 15px; /*white-space:nowrap;*//*不显示的地方用省略号...代替*/ padding-right:7px; /*文字距离右侧7像素。*/ text-overflow:ellipsis;/* 支持 IE */ -o-text-overflow: ellipsis; /* 支持 Opera */ background: sandybrown; } div a:after{ content:"..."; position: absolute; right: 3px; top: 30px; }/* 支持 Firefox */ </style> </head> <body> <div><a href="#">CSS截取字符串d用省略号，超出用省略号用省略号用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div> <div><a href="#">CSS截取字符串，并将超出用省略号用省略号用省略号代替</a></div> </body> </html>