Reputation: 2400
I declared width
and margins
but somehow my lines didn't get wrapped with an automatic line-break.
edit: I found the cause. It's because there are no spaces between words:
teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest teest
Upvotes: 9
Views: 41740
Reputation: 864
another way to do it is by:
white-space: pre-wrap; // preserve whitespace, the text is wrapped
overflow-wrap: break-word; // text is wrapped, line break on the end of a word
Upvotes: 3
Reputation: 318
try this one by one, it must be helpful for some situation:
p{
display: block; /* or inline-block, at least its a block element */
width: 100px; /* or width is certain by parent element */
height: auto; /* height cannot be defined */
word-break: break-all; /* */
word-wrap: break-word; /* if you want to cut the complete word */
white-space: normal; /* be sure its not 'nowrap'! ! ! :/ */
}
Upvotes: 5
Reputation: 1683
This will print each sentence in each line, without <br>
<p style="font-family:courier;white-space: pre;">
First Line
Second Line
Third Line
</p>
For example check jsfiddle http://jsfiddle.net/muthupandiant/sgp8rjfs/
Upvotes: 1
Reputation:
The real question is: why on Earth would you want to use in your case?
That's 6 bytes instead of 1 byte for each space!
Besides the waste of storage- and filesize, search engines will have a ball trying to understand it.
I would opt-out of whatever reason you have to use and opt-in for plain and simple space (" "), for both SEO and - even more important - less wasted space. This way you'll be achieving the same goal but delivering smaller downloads to website visitors.
Upvotes: 0
Reputation: 9542
Try with `word-wrap`
#id
{
word-wrap: break-word ;/*Allows unbreakable words to be broken*/
}
#id
{
word-wrap: normal ;/*Break words only at allowed break points*/
}
Upvotes: 0
Reputation: 1006
The element where text is should have css declaration:
div {
display: block;
width: 200px; /*based on how much width this div should have*/
}
and if it doesn't work try doing:
div { word-wrap: break-word }
Upvotes: 11