Question

css处理文字过长时显示为多余部分省略

css代码如下：
.contentBox1{ width:250px; height:174px; margin:0px; padding:0px; }
.contentBox1 ul li{
float:left;
height:auto;
width:250px;
text-decoration:none;
}
.contentBox1 ul li a{
float:left;
height:20px;
width:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#000;
}
.contentBox1 ul li span{
float:right;
font-family:"微软雅黑";
font-size:14px;
font-weight:bold;
color:#03C;
}
在HTML中的代码是：
<div class="contentBox1">
<ul>
<li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a><span>2014.12.16</span></li>
<li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a><span>2014.12.16</span></li>
<li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a><span>2014.12.16</span></li>
</ul>
</div>
我得到的结果是：

提问：怎么把li的点点放到a标签文字的前面？？？