Html 约束内联块元素'；s宽度，以适合父级'；s表示省略号

我试图在内联块元素中包含的文本上使用省略号效果

• 它必须是一个“内联块”元素
• “宽度”只能在其父级上设置

以下是HTML：

<div class="container">
    <div class="icon"></div>
    <div class="line">This is a much tooooooooooooooooo long line</div>
</div>

.container {
    border: solid 1px black;
    background-color: lightgrey;
    white-space: nowrap;
    padding: 10px;
    width: 200px;
}

.icon {
    border: solid 1px blue;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.line {
    border: solid 1px red;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

看

当然，它是通过在线条上设置宽度或将其显示设置为块来工作的，但对于我的用例来说，这是一个不允许的。我被困在那里了，知道吗

---

编辑：哦，我应该指定行的开头应该有一些其他的内联块元素（实际上是缩进和树视图的图标），因此，文本容器的宽度不能是其父元素的100%。

.container{
边框：实心1px黑色；
背景颜色：浅灰色；
填充：10px；
宽度：200px；
}
.线路{
边框：实心1px红色；
显示：内联块；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
最大宽度：100%；
}

这是一条很长的队伍

您只需在容器中使用display:inline flex即可，无需使用带有

图标和
行的
display
属性：


.container{
边框：实心1px黑色；
背景颜色：浅灰色；
空白：nowrap；
填充：10px；
宽度：200px；
显示：内联flex；
}
.图标{
边框：纯色1px蓝色；
宽度：16px；
高度：16px；
}
.线路{
边框：实心1px红色；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

这是一条很长的队伍
您能使用
最大宽度吗？编辑忍者d@如果您可以使用
max width
，Alexander Dayan有一个很好的解决方案。。。如果不想在
行上设置静态宽度
哦，我应该指定行的开头应该有一些其他的内联块元素（实际上是树视图的缩进和图标），那么也可以执行
宽度继承
，因此，文本容器的宽度不能是其父级的100%。。。（我更新了）如果您不使用边框，您可以使用负边距，并将文本缩进设置为图标的宽度：
。行{…左边距：-16px；文本缩进：16px；}
updated@HJ05，但行首的宽度不是固定的，也不会总是硬编码为“16px”。因此，我需要一种方法将此线条元素的宽度限制为其父元素的宽度…@AlexanderDayan谢谢，我会记住“calc”函数。但是，正如我所说的，行的开头的宽度是动态的，“displayflex”解决方案似乎可以做到这一点。然而，这会在我的总体布局中引发一些奇怪的行为，但我会深入研究。谢谢你，很高兴能帮上忙。