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

因此，我尝试实现的快速可视化（灰色）父容器具有可变宽度。第一个子项（红色）根据其内容具有可变的自动宽度，直到第二个子项（绿色）到达父项宽度的末尾，其中第一个子项（红色）需要调用文本溢出：省略号，第二个子项（绿色）始终保留在其同级项的右侧

所以，第一个图像示例是，文本的长度不足以占用父级的全部宽度。第二幅图是当第一个父级子级使用父级容器单元格的全宽+同级div的宽度时所需效果的示例

无论我在子divs上使用

inline block

和

flex

的两次尝试之间尝试了什么，我一直遇到的问题是，要么它强制换行，省略号不会显示为溢出，要么它尝试将父级推到100%宽度。请注意，不需要水平滚动条，表格应该在窗口的100%宽度处调用边界，但它并没有

如果第二个子项仍然固定在右侧，则任务很简单，但是如何使红色框自动变宽，直到它到达包含父项的一端，然后调用溢出，同时将绿色子项保留在其兄弟项的右侧

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

表格{
宽度：100%；
}
th{
边框：灰色1px点；
文本对齐：左对齐；
高度：1公厘；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
div{
边框：红色3px虚线；
最小宽度：3rem；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
背景色：rgba（红色，.2）；
}
分区：第n个孩子（1）{
显示：内联块；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
分区：第n个孩子（2）{
边框：绿色3px虚线；
背景色：rgba（绿色，.2）；
显示：内联块；
}

测试测试测试测试测试测试测试测试测试测试
废话
另一栏

您可以使用flexbox执行此操作，如下所示：

.container{
显示器：flex；
边框：2倍实心；
宽度：500px；
}
.container>div:最后一个子级{
宽度：100px；
边框：2倍纯绿；
弹性收缩：0；
}
.container>div:第一个子项{
边框：2倍纯红；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

一些文本
一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本

如果将

display:flex

应用于容器以并排对齐项目，则可以将

flex-shrink:0

应用于绿色子级，以确保其在红色div展开时保持其大小

div.container{
显示器：flex；
}
第1分部{
边框：2倍纯红；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}
第2分部{
边框：2倍纯绿；
宽度：100px；
弹性收缩：0；
}

测试
测试测试
测试测试
测试测试

设置

table layout:fixed

以便您的表对“另一列”使用300px，对前两列使用剩余空间（100%-300px）

为

文本溢出

（

省略号

非

省略号

）使用正确的值

将第一个

th

设置为

display:flex

并删除截断单元格内容的

height:1rem

表格{
表布局：固定；
宽度：100%；
}
.flex{
显示器：flex；
}
th{
边框：灰色1px点；
文本对齐：左对齐；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
div{
边框：红色3px虚线；
最小宽度：3rem；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
背景色：rgba（红色，.2）；
}
分区：第n个孩子（1）{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
分区：第n个孩子（2）{
边框：绿色3px虚线；
背景色：rgba（绿色，.2）；
}

测试测试测试测试测试测试测试测试测试测试
废话
另一栏

噢，我使用的收缩/增长方法不正确。谢谢你给我一片谦逊的馅饼！