Flexbox的包装和溢出省略号

问题描述：

.flexrow { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexcol { 
 
    border: 0; 
 
    margin: 0 1px; 
 
    min-height: 48px; 
 
    flex-grow: 1.0; 
 
} 
 

 
.flexcol-header { 
 
    padding: 4px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.flexcol-content { 
 
    padding: 4px; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="flexrow"> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header"> 
 
     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header"> 
 
     BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
</div>

如何使Flexbox的包裹只为flexcol-content宽度和忽略flexcol-header宽度，使得其文本溢出隐藏和ellipsed？

这就是我想要的东西来实现，但省略号：

.flexcol-header-text { 
 
    width: 0; 
 
    overflow: visible; 
 
} 
 

 
.flexcol-header-wrapper { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; /******* THIS does not work ************/ 
 
} 
 

 
.flexrow { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexcol { 
 
    border: 0; 
 
    margin: 0 1px; 
 
    min-height: 48px; 
 
    flex-grow: 1.0; 
 
} 
 

 
.flexcol-header { 
 
    padding: 4px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.flexcol-content { 
 
    padding: 4px; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="flexrow"> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header-wrapper"> 
 
     <div class="flexcol-header-text"> 
 
     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
 
     </div> 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header-wrapper"> 
 
     <div class="flexcol-header-text"> 
 
     BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
 
     </div> 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header-wrapper"> 
 
     <div class="flexcol-header-text"> 
 
     CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC 
 
     </div> 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text" size="4"> 
 
    </div> 
 
    </div> 
 
</div>

请注意，这只是一个小例子，但在现实世界中我使用的是服务器生成的行动态列。

所以我不知道连续有多少列以及它们有多大。

感谢

答

哟可以尝试这样的，

.flexcol { 
    border: 0; 
    min-height: 48px; 
    overflow: hidden; 
    flex-grow: 1; 
    flex: 0 0 48%; 
    box-sizing: border-box; 
    margin: 0 1%; 
}

Flexbox的包装和溢出省略号

相关推荐