如何使离子项目允许在离子2中溢出

Question

我想使ion-item允许其内容溢出。我尝试了以下CSS(特定的SCSS(

ion-item{
   overflow: visible;
   height : 220px;
}

但似乎不起作用。

我还尝试将overflow : visible属性添加到ion-item生成的元素(例如.item-inner，.item-block(，但这也行不通。

编辑(添加代码片段(

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
  <ion-content padding>
    <div class="rel-container">
      <ion-list>
        <ion-item>
          <div>Name1</div>
          <div>Name2</div>
          <div>Lorem ipsum dolor</div>
          <div class="error-container">
            <div class="error">a quick brown fox</div>
          </div>
        </ion-item>
      </ion-list>
    </div>
  </ion-content>

home.scss

ion-item,ion-list,ion-label, .item-md, .item-block, .item, .item-inner, .input-wrapper, .rel-container, .button-effect{
    overflow: visible;
}
page-home {
    ion-item{
        height: 9rem;
    }

    .error-container{
        padding: 5px;
        background: red;
        color: white;
        position: absolute;
        z-index: 400;
    }
    .rel-container{
        position: relative;
    }
}

Answer 1

在我回答之前，这里有一些杂项细节

Ionic v3.3.0
Angular v4.1.2

overflow无法正常工作的问题是IONIC应用于.item的CSS属性contain : content;。

(更多信息：https：//developer.mozilla.org/en-us/docs/web/css/contain(

要解决这个问题，我只需要用

覆盖它

.item {
    contain:none;
}

和平！✌️✌️✌️

Answer 2

您只需添加文本包装指令：

<ion-item text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item.
</ion-item>

https://ionicframework.com/docs/api/components/components/item/item/