How to make the text the maximum width and go to the next line

Question

I ran into a tiny problem. I can’t solve it. I use awesome Ionic framework to create a nice application. trying to work with lists. I set the maximum width for the text, and I want the test to go to the next line, this does not work, I use word-wrap: break-word;

my text is as follows:

I want the text to move to the next line.

Here: CODEPEN CODE + DEMO

Answer 1

You need to overwrite 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 it! important

Answer 2

Overwrite the space property to break the line, 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