When Text Exceeds Width, Continue In New Line

I have the following structure:

• Text goes here

• Text goes here &l

Solution 1:

Your example already word-wraps (because<p> is already a block element), if you want to break words, then you could try:

p.letters {
    word-wrap: break-word;
}

Here's a basic working example: http://jsfiddle.net/G9z5M/ (see updates below).

You can play around with it using various techniques:

/* Wraps normally, on whitespace */p.words {
    word-wrap: normal;
}    

/* Hides non-wrapped letters */p.hidden {
    overflow: hidden;
}

/* Outputs a single line, doesn't wrap at all */p.nowrap {
    white-space: nowrap;
}​

See updated fiddle: http://jsfiddle.net/G9z5M/1/

Solution 2:

For me it worked

white-space: initial;

May be it helps to someone else.

Solution 3:

Normaly p elements are block so the width is respected, and it should wrap at 10 pixels.

See http://jsfiddle.net/ejLmu/

If it does not work for you it means that you have some css rules that override the default settings. You either have set display:inline (in which case the width is not respected), or a white-space:nowrap; (which disables the text-wrapping).

Solution 4:

I am not sur I do understand your question but with CSS you shoudl try :

word-break: break-all; // normal; // keep-all;

And if you want to hide extra content :

overflow: hidden;

Solution 5:

You should use

style="width:10px; display: block;"