Ionic 4 响应式网格

Question

我需要一个 3 列的离子网格。 first 和 last 的列有内容的大小。在那一列中，我想添加图标或小 image.And 中心的列应该有大文本 overflow:hidden;text-overflow: ellipsis; white-space: 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>

但我无法将列放在中间 correctly.it 以设备最大宽度显示（在单独的行中）。我该怎么做？

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 一个尺寸，

这是关于如何执行此操作的 stackblitz。

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

Ionic 4 响应式网格

Ionic 4 responsive grid

ionic-framework

angular

ionic4

angular6