css 实现文字竖向排列，文本溢出省略号

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