约束内联块元素的宽度以适合父类的省略号

Question

我试图对包含在内联块元素中的文本进行省略号效果.

• 它HAS是一个"内联块"元素
• "宽度" 只能在其父级上设置

这是HTML:

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

而CSS:

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

看到.的jsfiddle

当然它的工作原理是在线上设置宽度或将其显示设置为阻止,但这对我的用例来说是禁忌.我被困在那里,任何想法？

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

Answer 1

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

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

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

更新:

对于左侧图标的情况,您可以使用calc如下:

.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;
    max-width: calc(100% - 16px);
}

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