文本缩进、换行、单行文本溢出显示省略号、多行文本的最后一行溢出显示省略号

1. text-indent: 40rpx;   文本缩进    


.title {
width: 550rpx;
text-indent: 40rpx;
}

2. word-wrap: break-word; 文本超出换行 


.title {
width: 550rpx;
word-wrap: break-word;
}

3. 单行文本溢出显示省略号

text-overflow:ellipsis;  文本溢出显示省略号

overflow: hidden; 隐藏溢出的文本 

white-space:nowrap;  不换行 

.title {
width: 550rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

4.多行文本的最后一行溢出显示省略号

 display: -webkit-box;  声明为弹性盒子

 overflow: hidden; 隐藏溢出的文本  

text-overflow:ellipsis;  文本溢出显示省略号

 word-wrap: break-word;  超出换行

 -moz-box-orient: vertical;   从上到下自动排列子元素

 -webkit-box-orient: vertical; 

 -webkit-line-clamp:2;   显示的行数

.title {
width: 550rpx;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

• 
  
  点赞
  


• 
  
  收藏


• 
  
  分享


• 
  

  
  

  
  
  • 文章举报