Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<p> when text exceeds width, continue in new line

Tags:

html

overflow

I have the following structure:

<ul>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
</ul>

When the text of the p exceeds the 10px limit I would like it to continue in a new row.. How do i do that? Thanks

like image 475
Dragan Avatar asked Dec 09 '12 18:12

Dragan


2 Answers

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/

like image 196
Oleg Avatar answered Oct 07 '22 11:10

Oleg


For me it worked

white-space: initial;

May be it helps to someone else.

like image 43
Kvvaradha Avatar answered Oct 07 '22 12:10

Kvvaradha