第一个孩子增加内容的宽度，直到父边界调用溢出椭圆 [英] First child grow width of content until parent boundary invokes overflow ellipses

问题描述

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

So a quick visual of what I'm trying to accomplish wherein the (gray) parent container is of variable width. The first child (red) is of variable auto width depending on its content until second child (green) reaches the end of the parent width wherein text-overflow: ellipses needs invoked on the first child (red) and the second child (green) always remains on the right of its sibling.

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

So first image example is if text isn't long enough to consume full width of parent. Second image is example of desired effect when first parent child does consume full width of parent container cell + width of sibling div.

无论使用 inline-block 和<$子div上的c $ c> flex 是要么强制换行，要么不显示椭圆溢出，要么尝试将父级传递的宽度提高100％。请注意，没有必要使用水平滚动条，并且表应该在窗口的100％宽度处调用边界，但是并不需要...

The problem I keep running into no matter what I try between attempts using inline-block and flex on the child divs is that either it forces wrapping, the ellipses isn't displayed for overflow, or it tries pushing the parent passed 100% width. Notice no horizontal scrollbar should be necessary and table should invoke boundary at 100% width of the window, yet it does not...

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

The task is simple if the second child remains fixed to the right but how can I make the red box auto width until it reaches the containing parents end and then invoke overflow while keeping the green child on the right of it's sibling?

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

Quick example of the struggle (Notice green child is consumed by overflow:hidden and no longer visible in first cell);

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>

抱歉是重复的，但我找不到与此场景有关的任何内容。

Apologies if this is a duplicate but I couldn't find anything specific to this scenario. Both child divs would sit in a table cell if that helps description.

推荐答案

您可以使用以下flexbox来做到这一点：

You can do this with flexbox like below:

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

这篇关于第一个孩子增加内容的宽度，直到父边界调用溢出椭圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！