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

但这似乎不起作用，包含长文本的列会延伸到文本的宽度，并超过其父行的宽度

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

Answer 1

所以基本上所有列的大小都可以根据那里的内容而变化吗？

您需要对所有列执行size="auto"或col-auto，而带有长文本的ion-col必须具有固定的宽度才能使用省略号。

例如，请参阅此堆叠闪电战。

https://stackblitz.com/edit/ionic-yashpatelyk-grid

Answer 2

我的问题得以解决，方法是直接将文本传递到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;
            }
        }
    }
}

文本内容过长时，列超过行的宽度

2 个答案: