web-dev-qa-db-ja.com

ion-itemで長い文字列をワードラップする方法

IONICには、イオンアイテムのワードラップに関する2つの問題があります。 2. Firefoxで自動改行とレスポンシブが機能しない（Chromeは問題ありません）。Firefoxでこの問題を修正する方法は？

<div class="row responsive-sm">
<div class="col">
    <div class="item item-body">
        <ion-item class="wrap" style="Word-wrap: break-Word; Word-break: break-all;">
        #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion 
        </ion-item>
    </div>
</div>

どんな助けでも大歓迎です。宜しくお願いします。ここに問題を示すための完全なHTMLがあります codepen

ionic-frameworkword-wrap
51
DinDin

For ionic 1：の場合

item-text-wrapclassをアイテムに追加します。

<ion-item class="item-text-wrap">
  some long string
</ion-item>

ionic 2：の場合

text-wrap属性をアイテムに追加します。

<ion-item text-wrap>
  some long string
</ion-item>
108
Mudasser Ajaz

Ionic 2では、text-wrap属性を使用します

<ion-item text-wrap>
  text here wraps to multiple lines
</ion-item>
97
Aaron Broad

カスタムのCSSクラスに同じWordラッピング効果を持たせたい場合は、追加するだけです

white-space: normal;

あなたのクラスに。

ソース： ionic forum

19
Guillem Cucurull

Ionic 4には、次のようにtext-wrap要素でion-labelを使用します。

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

イオン4

class = "ion-text-wrap"

  <ion-item>
    <ion-label class="ion-text-wrap">Long Text</ion-label>
  </ion-item>

リンク

1
Code Spy