例子：li {width:80pxheight:30pxline-height:30pxoverflow:hidden}
说明：设置li的宽度和高度，超出部分就会被隐藏。
overflow:hidden这个属性的作用是隐藏溢出。
在样式中加上overflow: hiddentext-overflow: ellipsiswhite-space: nowrapoverflow: hidden内容超出div部分隐藏
text-overflow: ellipsis文本溢出包含元素显示省略符号来代表被修剪的文本
white-space: nowrap文本不会换行
<html><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:after{content:"..."}/* 支持 Firefox */
</style>
</head>
<body>
<div><a href="#">CSS截取字符串，超出用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号代替</a></div>
</body>
</html>
