22

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

4
  • No I would like it to overflow per word
    – Dragan
    Commented Dec 9, 2012 at 18:13
  • But that's what this example does. I thought you wanted each letter on a new line.
    – Mr Lister
    Commented Dec 9, 2012 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
    Commented Dec 9, 2012 at 18:20
  • 1
    overflow-wrap property may be what you want if you're finding this question. See stackoverflow.com/a/3059128/16940 Commented Feb 22, 2022 at 18:06

6 Answers 6

29

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/

10

For me it worked

white-space: initial;

May be it helps to someone else.

1
  • This works, when combined with max-width: Xpx.
    – th3an0maly
    Commented Feb 2, 2022 at 15: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).

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;
0

You should use

style="width:10px; display: block;"
1
  • 1
    p already has display:block, so that won't make a difference.
    – Mr Lister
    Commented Dec 9, 2012 at 18:22
0

word-wrap is now legacy name for overflow-wrap as per CSS 3 specifications. See here for reference.

So, to break a word so it doesn't overflow it's container width simply do:

<p style="width:10px; overflow-wrap:break-word">this is a looooong line of text</p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.