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

客官°小女子只卖身不卖艺 2021-07-24 22:35 441阅读 0赞

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

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

![20200222174809322.png][]

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

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

![20200222175336726.png][]

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

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

overflow: hidden; 隐藏溢出的文本

white-space:nowrap;  不换行

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

![20200222175430734.png][]

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

![20200222175336726.png][]

[20200222174809322.png]: /images/20210724/f82fbe84546d48cc941daf86cfeaab05.png
[20200222175336726.png]: /images/20210724/10bd4facbbb44e63959de51dad5bbe08.png
[20200222175430734.png]: /images/20210724/60ac806abf5c43c9bb51eb8cb4b12b28.png