css 仿文件夹层级过多超出div部分 隐藏头部

文件层级过多，宽度就这么大。前面文件夹名需要隐藏

一般div的隐藏都是隐藏后面的。然后带个省略号。。。。不能解决

重点就是flex布局先自动均分。然后加dir="rtl"， 

 

.filetitle-style{
    height:45px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
 .filetitle-style>div{
    height: 45px;
}

.filename{
    max-width:100%;---宽度如果设置100%，名称不够长的时候会有留白
    overflow:hidden;
    display: flex;
    flex-direction: row;
}

.jiantoustyle{
    font-size:11px;
    margin-top:16px;
}

<div class="filetitle-style">
    <div dir="rtl" class="filename">
        <a href="">开头的文件夹开头的文件夹开头的文件夹啊</a>
    </div>
    <div dir="rtl" class="filename">
        <a href="">哈哈哈哈哈哈哈哈哈哈哈哈哈</a>
        <div class="jiantoustyle glyphicon glyphicon-menu-right"></div>---箭头的样式
    </div>

    <div dir="rtl" class="filename">
        <a href="">呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀</a>
        <div class="jiantoustyle glyphicon glyphicon-menu-right"></div>---箭头的样式
    </div>

    <div dir="rtl" class="filename">
        <a href="">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</a>
        <div class="jiantoustyle glyphicon glyphicon-menu-right"></div>
    </div>

    <div dir="rtl" class="filename">
        <a href="">最后文件夹最后的</a>
        <div class="jiantoustyle glyphicon glyphicon-menu-right"></div>
    </div>
</div>

flex不兼容ie10下 。网上可以找兼容的办法。

最后效果：