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