Question

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

HAS 成为＆＃34;内联块＆＃34;元件
＆＃34;宽度＆＃34;可以仅设置其父

以下是 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

＆＃13;

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

＆＃13;

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

＆＃13;

更新：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用容器中的 display：inline-flex 进行操作，而无需将display属性与icon和{{1}一起使用}：

line

.container {
    border: solid 1px black;
    background-color: lightgrey;
    white-space: nowrap;
    padding: 10px;
    width: 200px;
    display: inline-flex;
}

.icon {
    border: solid 1px blue;
    width: 16px;
    height: 16px;
}

.line {
    border: solid 1px red;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

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

2 个答案: