css 實現文字豎向排列，文本溢出省略號

文字排列方式

多行文本

margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/  

單行文本

 width: 20px;  
    margin: 0 auto;  
    line-height: 24px; 

width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/
    word-break:break-all;

文本溢出處理

單行文字

.box{
    width:300px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

多行

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只顯示3行*/
  -webkit-box-orient: vertical;
}

解決多行不生效問題

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只顯示3行*/
  /* autoprefixer: off */ 
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

因爲autoprefixer自動移除老式過時的代碼，所以先關閉再開啓。

文本溢出有時不生效的原因可能是因爲存在 text-indent 或者padding，導致省略號看不見