Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 292
MacMac Avatar asked Jan 26 '11 15:01

MacMac


People also ask

How do you break a text line?

To add spacing between lines or paragraphs of text in a cell, use a keyboard shortcut to add a new line. Click the location where you want to break the line. Press ALT+ENTER to insert the line break.

How do you break a long sentence in CSS?

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.

How do you break a long sentence in HTML?

The <wbr> element If you know where you want a long string to break, then it is also possible to insert the HTML <wbr> element. This can be useful in cases such as displaying a long URL on a page. You can then add the property in order to break the string in sensible places that will make it easier to read.


2 Answers

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

like image 32
FabianCook Avatar answered Oct 03 '22 22:10

FabianCook


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;
}
like image 83
Sotiris Avatar answered Oct 04 '22 00:10

Sotiris