css隐藏多余字

//页面部分代码

<view class=" " wx:for="{{address}}">

   <view>

<text class="username-phone" >张三</text>

<text class="phone" >187****9990</text>

<view>

<text class="defult" >[默认]</text>

<text class="address" >广东深圳市南山区广东深圳市南山区....</text>

</view>

   </view>

</view>

<view class=" " wx:for="{{address}}">

   <view>

<text class="username-phone" >张三张三张三张三张三</text>

<text class="phone" >187****9990</text>

<view>

<text class="defult" >[默认]</text>

<text class="address" >广东深圳市南山区广东深圳市南山区....</text>

</view>

   </view>

</view>

//部分css

.username-phone{

display:blok;

color:#080808;

font-size:16px;

margin-left:12rpx;

width:80px;

max-width:80px;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

float:left;

font-weight:580;

}

.phone{

display:block;

color:#080808;

font-size:16px;

font-weight:550;

}

//效果图

备注：主要属性是

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

分别实现隐藏、溢出用省略号显示、溢出不换行