求CSS高手帮我解决这个问题，代码在下边。
<!Doctype html>
<html>
<head>
<style>
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
a:link {color:#15AA10;text-decoration:none;}
a:visited {color:#F00;}
a:hover { font-size:1.2em;background:#efe;}
a:active {test:expression(target="_blank");color:#bbF;}
.ulface {text-align:center;width:800px;list-style-type:none ; margin:5px auto;}
.ulface li {width: 150px;height:250px; float: left; margin:24px; padding:0;}
.ulface img{ width:150px; height:150px;border:0; }
.ulface a,span,button {display:block;}
.ulface span{height:30px;width:150px; padding-top:5px; text-align:center; color: #ff6600;font: bold 20px helvetica;}
.ulface button{height:30px;margin:0 auto;}
.a2 {overflow: hidden; text-overflow:ellipsis; height:40px;line-height:30px;}
</style>
</head>
<body>
<ul class="ulface">
<li >
<a href="#"><img src="pro.jpg" /></a>
<a class="a2" href="#" target="_blank">这里怎么样才能让超出部分显示省略号?</a>
<span>这里是一些文字</span>
<button type="button">
<a href="#">这里是一个链接</a>
</button>
</li>
</ul>
</body>
</html>
如图所示，怎样才能让文字单行显示且超出的部分用省略号代替。
按照你的方法果然可行，可是问题又来了，这个按钮在IE下为何不能居中啊？弄了好久都不能让按钮在IE下居中，我是初学者，还得请教你了。
万能居中法
.cssname {display:block; width:100px; margin:0 auto; text-align:center;}