span超出最大宽度的内容用省略号代替

<!-- 下面是我写的代码，完全没有效果。要实现标题说的这种效果，应该怎么办呀 -->

<!--CSS -->
.nickname{
display: block;
height: 1.3rem;
min-width: 3rem;
max-width:8rem;
font-size: 12px;
padding: 0.1rem 0.6rem;
background: #ff6599;
color: white;
border-radius: 10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:normal;
}
<!--HTML -->
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<img class="mui-media-object" src="res/avatar/user1.jpg">
<div class="mui-media-body name"><span class="nickname">小丽小丽小丽小丽小丽</span></div>
<div class="mui-media-body age">20 巨蟹 太原</div>
</li>
</ul>