text-overflow 属性规定当文本溢出包含元素时发生的事情。我们可以使用它来对文本超出的部分进行样式的处理。
text-overflow: clip|ellipsis|string;包含三种属性
- clip : 切断效果；
ellipsis： 超出部分显示省略符号来代表被修剪的文本；
- string: 用指定的字符串来代表；
html:
<view class="x-book" wx:for="{{latestNovel}}" bindtap="fictionClick">
<image class="book-img" src="{{host+item.novel_cover}}"></image>
<view class="book-name">{{item.novel_name}}</view>
</view>
css样式：
.x-book {
display: inline-block;
position: relative;
width: 165rpx;
margin-top: 10px;
margin-right: 10px;
}
.book-img {
width: 100%;
height: 210rpx;
box-shadow:-3px 3px 7px #B8B8B8;
}
.book-name {
text-align: center;
white-space:nowrap;overflow:hidden;
text-overflow : ellipsis;
font-size:11px;
color: #6A6A6A;
}
最终效果：