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

 
 
text-overflow 属性规定当文本溢出包含元素时发生的事情。我们可以使用它来对文本超出的部分进行样式的处理。
  
text-overflow: clip|ellipsis|string;包含三种属性
    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;
}
 
最终效果:
 

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

 
上一篇:类型“XXX”的控件“XXXX”必须放在具有 runat=server 的窗体标记内。


下一篇:Kali-linux使用社会工程学工具包(SET)