Question

我需要一个3列的离子栅。并且第一个和最后一个列具有内容的大小。我想在该列中添加图标或小图像。居中的列应具有较大的文本，并带有overflow：hidden; text-overflow：省略号; 空白：nowrap;。

我尝试使用此代码

<ion-grid>
        <ion-row>
            <ion-col size="auto" style="border: 1px solid;">
                image
            </ion-col>
            <ion-col style="border: 1px solid; 
overflow:hidden;  
text-overflow: ellipsis;  
    white-space: nowrap;">
                <div>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 
                  </div>
            </ion-col>
            <ion-col size="auto" style=" border: 1px solid; ">
                icon
            </ion-col>
        </ion-row>
    </ion-grid>

但是我不能正确地将该列放在中间。它以设备最大宽度显示（在单独的行中）。我该怎么做？

Answer 1

尝试以下操作：给中间一列设置宽度，然后为div设置样式。

<ion-grid>
        <ion-row>
            <ion-col size="auto" style="border: 1px solid;">
                image
            </ion-col>
            <ion-col size="4">
                <div style="border: 1px solid; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 
                  </div>
            </ion-col>
            <ion-col size="auto" style=" border: 1px solid; ">
                icon
            </ion-col>
        </ion-row>
    </ion-grid>

Answer 2

我在这里同意@rtpHarry，您需要设置div的样式并为中间ion-col赋予一个大小，

这是如何实现此目的的捷报。

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

离子4响应式网格

2 个答案: