<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>css写省略号方法</title>
<style>
/* CSS DEMO */
* { margin: 0padding: 0}
a { text-decoration: nonecolor: #000}
a:hover { text-decoration: nonecolor: #000}
ul {
width: 300px
margin: 40px auto
padding: 12px 4px 12px 24px
border: 1px solid #D4D4D4
background: #F1F1F1
}
li { margin: 12px 0}
li a {
display: block
width: 220px
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
}
/* firefox only */
li:not(p) {
clear: both
}
li:not(p) a {
max-width: 170px
float: left
}
li:not(p):after {
content: "..."
float: left
width: 25px
padding-left: 5px
color: #000
}
/* XHTML DEMO*/
</style>
</head>
<body>
<ul>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
</ul>
</body>
</html>
css截取多行文字可以使用容器的超出隐藏来实现，注意：多行无法截取后面不会出现省略号；
1、因为要对其设定宽高，所以设置容器为block或者inline-block；
2、设置overflow:hidden让超出内容的部分不显示；
3、为了避免长单词，长的数字不换行，还需要对该容器设置:word-break:break-allword-wrap:break-word
这样就可以实现了文字的截取效果；
具体代码如下：
<style>.wordwrap{width:100pxheight:36pxline-height:18pxfont:400 12px/1.5 Simsunoverflow:hiddenword-break:break-allword-wrap:break-word}
</style>
<div class="wordwrap">
<span>文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取</span>
</div>
