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，导致省略号看不见