如何在 Ionic 2 中使 ion-item 允许溢出？

Posted 2023-03-06

【中文标题】如何在 Ionic 2 中使 ion-item 允许溢出？

【英文标题】：How to make ion-item allow overflow in Ionic 2?

【发布时间】：2017-11-09 05:06:30

【问题描述】：

我想让ion-item 允许其内容溢出。我尝试了以下css（具体是scss）

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

但它似乎不起作用。

我也尝试将overflow : visible 属性添加到ion-item 生成的元素中（如.item-inner、.item-block），但这也没有用。

编辑（添加代码 sn-ps）

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;
    

【问题讨论】：

你放了！重要吗？

应该是overflow: auto; 没有" 引号

如果你用浏览器的开发工具检查元素，它对那个属性有什么看法？

@LGSon 我的意思是说overflow: "visible";应该没有像overflow: visible;这样的引号

实际代码中是不带引号的。有问题的错字。会更正

【参考方案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;

和平！ ✌️✌️✌️

【参考方案2】：

你可以只添加 text-wrap 指令：

<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/item/Item/