flex实现上下居中,css超出省略号,文字两端对齐,文字竖着排

2,586 阅读1分钟

上下居中

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

单行超出省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行超出省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

超出两行省略

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 

文字两端对齐

text-align-last: justify;

文字竖着排

writing-mode: vertical-rl;

(更多小技巧)[juejin.cn/post/684490…]