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

Question

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 :

I want the text to jump next line.

Here is : CODEPEN CODE + DEMO

Answer 1

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

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

Codepen

Output

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