css标题超出部分显示省略号

超新星

开发项目的时候，要求标题、或者内容多出部分显示省略号…
这时很多人都会想到这是js，其实单单使用css就可以就可以搞定了。

1.      .warp{
   
2.                           width: 240rpx;
   
3.                           height: 45rpx;
   
4.                             background-color: green;
   
5.                           overflow: hidden;
   
6.               word-break: break-all;                /*表格自动换行，避免撑开*/
   
7.                             text-overflow: ellipsis;                  /*多出文本溢出显示...*/
   
8.               display: -webkit-box;              /*盒子模型*/
   
9.               -webkit-box-orient: vertical;  /*从上到下垂直排列子元素*/
   
10.               -webkit-line-clamp: 1;              /*显示行数*/
    
11.              }
    

复制代码

html:

1.   <!--index.wxml-->
   
2.                 <view class="container">
   
3.                       <view class="warp">1.我是容器我内容很多我是容器我内容很多我是容器我内容很多</view>
   
4.                 </view>
   
5. 
   

复制代码