饭饭120710
饭饭120710
  • 发布:2016-01-19 11:46
  • 更新:2016-01-19 12:35
  • 阅读:1668

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

分类:HTML5+

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

<!--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>

2016-01-19 11:46 分享
已邀请:
五块钱的果汁

五块钱的果汁 - 勤奋是一种被逼无奈 - 热爱是一种情不自禁~

可以使用mui-ellipsis类

li{width: 100px;}
<li class="mui-ellipsis">dsadsadsadsadaadas</li>
Tronyel

Tronyel

可以试试用JS来判断,如果字符串长度超过指定长度,就替换一下...

要回复问题请先登录注册