css中文字超出文本框，溢出部分用点点点表示

 

 

text-overflow 属性规定当文本溢出包含元素时发生的事情。我们可以使用它来对文本超出的部分进行样式的处理。

　　

text-overflow: clip|ellipsis|string;包含三种属性

1. 1. 　clip　: 切断效果；

   2. ellipsis： 超出部分显示省略符号来代表被修剪的文本；

   3. 　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;
}

 

 

最终效果：