html - 当文本内容太长时，列宽超过行宽

Question

我有一行包含 3 列:第一列和最后一列设置为 size: auto 属性，第二列占用剩余的可用空间:

<ion-grid>
    <ion-row nowrap justify-content-center align-items-center>
        <ion-col size="auto">
            <p>I</p>
        </ion-col>
        <ion-col class="long-text">
            <p>A text that makes this column exceeds the width of the row</p>
        </ion-col>
        <ion-col size="auto">
            <p>III</p>
        </ion-col>
    </ion-row>
</ion-grid>

然后，为了剪切长文本，我使用了以下 scss 代码:

ion-grid {
    ion-row {
        ion-col {
            &.long-text {
                p { 
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

但这似乎不起作用，包含长文本的列会拉伸(stretch)与文本的宽度一样长，并超过其父行的宽度

我正在寻找一种方法，当文本占用太多空间时，显示文本末尾的三个点，同时保留行内的所有列。

Answer 1

通过直接将文本传递到 ion-col 而不将其包装在另一个元素中，解决了我的问题:

<ion-grid>
    <ion-row nowrap justify-content-center align-items-center>
        <ion-col size="auto">
            <p>I</p>
        </ion-col>
        <ion-col class="long-text">
            A text that makes this column exceeds the width of the row
        </ion-col>
        <ion-col size="auto">
            <p>III</p>
        </ion-col>
    </ion-row>
</ion-grid>

ion-grid {
    ion-row {
        ion-col {
            &.long-text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}