Long Offer Break Method

Question

I am developing an iPhone theme for my site, you can break a long sentence like this:

A long sentence would go past the iPhone screen and I need this to break 

In it:

 A long sentence would go past the iPhone screen and I need this to break 

It is displayed as follows:

http://uimgz.com/i/M8U5X5f2d1.png

Answer 1

if your text has spaces, then adding a width for the wrap element will cause the text to break automatically. But if you have text without a space (like a link), you can use break-word :

 .your-selector { word-wrap: break-word; } 

Answer 2

According to: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Browser_compatibility

 pre { word-wrap: break-word; /* IE 5.5-7 */ white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */ white-space: pre-wrap; /* current browsers */ } 

word-wrap no longer works, use white-space instead

Answer 3

I think the problem is that the "viewport" is wider than the screen of the device. See this post for some background and possible solution.