CODEWITHSUNDEEP
htmlcssiphoneword-wrap
MacMac
MacMac

Reputation: 35301

Method of breaking a long line sentence

I'm developing an iPhone theme for my website, can you be able to break a long sentence something like this:

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

Into this:

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

Showing like this:

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

Upvotes: 8

Views: 18865

Answers (3)

FabianCook
FabianCook

Reputation: 20557

As per: 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 doesn't seem to work any more, use white-space instead

Upvotes: 10

Jay K
Jay K

Reputation: 2120

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

Upvotes: 0

Sotiris
Sotiris

Reputation: 40046

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

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

Upvotes: 10

Related Questions