html - flexbox 环绕和溢出省略号

Question

我有这个片段:

.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 wrap only flexcol-content 宽度和ignore flexcol-header 宽度，使得它的文本溢出被隐藏和省略了吗？

这是我想要实现的，但带有省略号:

.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>

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

所以我事先不知道一行中有多少列以及它们有多大。

谢谢

Answer 1

你可以这样试试，

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