使用ellipsis时的问题和控制文字n行显示（webkit-box方法）

使用ellipsis时的问题和控制文字n行显示（webkit-box方法）

1、使用ellipsis时的问题

@mixin ellipsis() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

相信许多人都经常会使用上面这种方法让文字在一行显示，多余的用省略号代替

但是这样做的前提一定要是外层盒子有确定的宽度，如果没有（如flex: 1自动撑开的情况或是根本没有设置过宽度），这一行就会将整个盒子给撑开，达不到想要的效果

所以解决方式就可以：根据其余margin、padding、页面宽度等信息算出这个盒子具体应该占的宽度，直接进行设置即可

2、让文字在n行显示

这里用到了弹性布局的-webkit-line-clamp属性来设置行数

@mixin ellipsis2($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  // 以上三行比较重要
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}