Luke
Luke

Reputation: 2400

HTML Automatic line-break doesn't work?

I declared width and margins but somehow my lines didn't get wrapped with an automatic line-break.

enter image description here

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

Answers (6)

Eden Sharvit
Eden Sharvit

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

soytian
soytian

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

muTheTechie
muTheTechie

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

user1093284
user1093284

Reputation:

The real question is: why on Earth would you want to use &nbsp; 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 &nbsp; 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

Prashobh
Prashobh

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

mswiszcz
mswiszcz

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

Related Questions