20

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

Dragan
  • 3,565
  • 12
  • 40
  • 59
  • No I would like it to overflow per word – Dragan Dec 09 '12 at 18:13
  • But that's what this example does. I thought you wanted each letter on a new line. – Mr Lister Dec 09 '12 at 18:18
  • Wait a minute, you mean you want to spread the `p` over multiple list items? That's not possible. To do that, put each word in a list item of its own by hand (or with Javascript or something). – Mr Lister Dec 09 '12 at 18:20
  • `overflow-wrap` property may be what you want if you're finding this question. See https://stackoverflow.com/a/3059128/16940 – Simon_Weaver Feb 22 '22 at 18:06

5 Answers5

27

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/

Oleg
  • 9,131
  • 2
  • 44
  • 56
10

For me it worked 

white-space: initial;

May be it helps to someone else.

Kvvaradha
  • 682
  • 12
  • 27
4

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).

Gabriele Petrioli
  • 183,160
  • 33
  • 252
  • 304
1

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;
llange
  • 727
  • 2
  • 10
  • 14
0

You should use 

style="width:10px; display: block;"
myjack
  • 1