时间戳

首页 > 解决方案 > 文本内容太长时列超过行宽

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

问题描述

我有一行包含 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;
                }
            }
        }
    }
}

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

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

标签： htmlcssionic-framework

解决方案

所以基本上所有列的大小都可以根据内容的不同而变化，对吧？

您需要为所有列执行size="auto"或操作，并且长文本需要具有固定宽度才能使省略号起作用。col-autoion-col

例如，参见这个 stackblitz。

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

推荐阅读