解决overflow在flex和grid布局中失效

我们日常处理单行文字溢出的时候一般使用如下的代码：

.line-clamp-1-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

但是当父元素为grid或者flex的子元素的时候，这种方法就会失效

由于overflow渲染时是根据元素的宽度判断边界的，而flex和grid布局时没有明确的宽度属性，所以overflow属性就会失效，解决的办法也很简单，给他一个min-width，既不影响布局，又有了宽度

本文链接：解决overflow在flex和grid布局中失效
版权声明：本文章采用CC BY-NC-SA 3.0 CN许可协议进行许可。转载请注明出处！