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

 

 

最終效果：