Making div responsive

Ionic Framework ionic-v3
1

hi
i am new with app development using ionic 2. i have a div under ion-list which contains long text.but for some reason text doesn’t format.
attached is screensho

image
Screenshot_2015-11-16-23-14-48.png1080×1920 40.3 KB

2

custom the sass or used component such as card

1 Like
3

What is the styling on the div? You can use an ion-item with the text-wrap attribute:

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

ah，Updated doc as soon as possible

5

Thankkkkkk youuuuuuu…finally found the answer :slight_smile: …!!

6

How to make a new line for \n ? text-wrap not work for \n

7

<br/> gives you a new line in HTML.

8

If I have a ‘\n’ in json {‘msg’:‘abc \n def’} , my question is how to display ‘abc’ and ‘def’ in multiline ?

9

Cool! But, how do this in ion-title?

<ion-header>
  <ion-navbar>
    <ion-title text-wrap>text text text text text text text text text text text text ?</ion-title>
  </ion-navbar>
</ion-header>

the code above not working

10

Does anybody know the answer? I have the same problem: how to make ion-title responsive. I tried text-wrap and responsive-sm, but neither works.

Thanks.

11

use something of the sort in your css:

p{ white-space: pre-line; }

1 Like
12

Aparantely, is not possible make ion-title responsive

13

Yeah, I figured it out already. Which is kind of strange feature. I don’t really understand the motivation behind it. I think Ionic team should re-think it.