第一个孩子增加内容的宽度，直到父边界调用溢出椭圆

Question

快速浏览一下我要完成的工作，其中（灰色）父容器的宽度可变。第一个子项（红色）根据其内容具有可变的自动宽度，直到第二个子项（绿色）到达父级宽度的末尾为止，其中文本溢出：需要在第一个子项（红色）和第二个子项（绿色）上调用省略号始终保持其兄弟姐妹的权利。

所以第一个图像示例是文本长度是否不足以占用父级的整个宽度。第二个图像是当第一个父级子级确实消耗了父级容器单元格的全部宽度+兄弟级div的宽度时所需效果的示例。

无论在子div上使用inline-block和flex进行两次尝试之间的尝试如何，我一直遇到的问题是它要么强制换行，要么不显示椭圆溢出，要么尝试推动父级传递100％的宽度。请注意，没有必要使用水平滚动条，并且表格应该在窗口宽度的100％处调用边界，但是并不需要...

如果第二个孩子仍然固定在右边，那么任务很简单，但是我如何使红色框自动变宽，直到到达包含父对象的父母端，然后调用溢出，同时将绿色孩子保持在其兄弟姐妹的右边？ / p>

简单的例子（注意，绿色的孩子被溢出：隐藏，在第一个单元格中不再可见）消耗

table {
  width: 100%;
}

th {
  border: gray 1px dotted;
  text-align: left;
  height: 1rem;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
}

div {  
  border: red 3px dashed;
  min-width: 3rem;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
  background-color: rgba(red, .2);  
}

div:nth-child(1) {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
}

div:nth-child(2) {
  border: green 3px dashed;
  background-color: rgba(green, .2);
  display: inline-block;
}

<table>
  <thead>
    <tr>
      <th>
        <div>
          Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing  
        </div>
        <div>
          Blah
        </div>
      </th>
      <th style="width: 300px">
        <div>
          Another COLUMN
        </div>
      </th>
    </tr>
  </thead>
</table>

很抱歉，如果这是重复的，但是我找不到与此场景有关的任何内容。如果这有助于说明，则两个子div都会坐在表格单元格中。

Answer 1

您可以使用flexbox进行以下操作：

.container {
  display:flex;
  border:2px solid;
  width:500px;
}
.container > div:last-child {
  width:100px;
  border:2px solid green;
  flex-shrink:0;
}
.container > div:first-child { 
  border:2px solid red;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

<div class="container">
  <div>some text</div>
  <div></div>
</div>
<div class="container">
  <div>some text some text some text some text some text some text some text some text</div>
  <div></div>
</div>

Answer 2

如果将display: flex应用于容器以使项目并排对齐，则可以将flex-shrink: 0应用于绿色子项，以确保在红色div扩展时它保持其大小

div.container { 
  display: flex;
}

div.div1 {
  border: 2px solid red;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div.div2 {
  border: 2px solid green;
  width: 100px;
  flex-shrink: 0;
}

<div class="container">
  <div class="div1">
    test test test 
  </div>
  <div class="div2"></div>
</div>

<div class="container">
  <div class="div1">
    test test test test test test test test test test test test
    test test test test test test test test test test test test
    test test test test test test test test test test test test
  </div>
  <div class="div2"></div>
</div>

Answer 3

1. 设置table-layout: fixed，以便您的表将300px用于“另一个列”，并将剩余空间（100％-300px）用于前两列。
2. 为text-overflow使用正确的值（ellipsis而不是ellipses）
3. 将第一个th设置为display: flex并删除height: 1rem，这会截断单元格的内容。

table {
  table-layout: fixed;
  width: 100%;
}

.flex {
  display: flex;
}

th {
  border: gray 1px dotted;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div {  
  border: red 3px dashed;
  min-width: 3rem;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
  background-color: rgba(red, .2);  
}

div:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div:nth-child(2) {
  border: green 3px dashed;
  background-color: rgba(green, .2);
}

<table>
  <thead>
    <tr>
      <th class="flex">
        <div>
          Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing  
        </div>
        <div>
          Blah
        </div>
      </th>
      <th style="width: 300px">
        <div>
          Another COLUMN
        </div>
      </th>
    </tr>
  </thead>
</table>