CODEWITHSUNDEEP
cssionic-framework
Yasser B.
Yasser B.

Reputation: 835

How to make max-width text and jump to next line

I'm facing a tiny problem. I'm not able to solve it. I'm using the awesome Ionic framework to build a nice application. trying to work with list items. I'm setting a max width for the text, and I want test to jump to the next line, this is not working, I'm using word-wrap: break-word;

my text is appearing like that :

enter image description here

I want the text to jump next line.

Here is : CODEPEN CODE + DEMO

Upvotes: 7

Views: 10603

Answers (2)

Usman Arshad
Usman Arshad

Reputation: 868

Overwrite the white-space property for line-break, and to center the text add margin-left and margin-right auto;

a.item h3 {
  margin-left: auto;
  margin-right: auto;
  white-space: normal;
}

Codepen

Upvotes: 5

m4n0
m4n0

Reputation: 32355

You need to overwrite the default ionic CSS from white-space: no-wrap

.item h3 {
  white-space: normal !important;
}

Codepen

Output

Normal wrap

But I would try to use a custom CSS file and load it after ionic CSS to avoid using !important

Upvotes: 12

Related Questions