display为flex和 省略号之间的冲突

我们在前端开发的时候会有一个效果是省略号表示多余的内容，代码如下：

    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //2表示的是第几行是省略号
    overflow: hidden;

但是如果你的display设置flex，那么省略号的效果就会失效，因为在省略号的效果种有display为：-webkit-box这个操作。

css3模块斜切而文字不斜切

模块是斜切的，但是文字是不斜切的，如下图：

技巧是： 模块斜切-30deg ，文字斜切：30deg。 模块斜切成斜的，文字反斜切回来，就变成正的了。