when text exceeds width, continue in new line

Question

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

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

Oleg · Accepted Answer · 2012-12-09T18:28:28.107

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/

score 10 · Answer 2 · answered Oct 11 '18 at 08:02

10

For me it worked

white-space: initial;

May be it helps to someone else.

answered Oct 11 '18 at 08:02

Kvvaradha

732
1
13
28

This works, when combined with `max-width: Xpx`. – th3an0maly Feb 02 '22 at 15:27

score 4 · Answer 3 · answered Dec 09 '12 at 18:19

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

score 1 · Answer 4 · answered Dec 09 '12 at 18:25

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;

answered Dec 09 '12 at 18:25

llange

757
2
10
14

score 0 · Answer 5 · answered Dec 09 '12 at 18:19

0

You should use

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

answered Dec 09 '12 at 18:19

myjack

1

1

`p` already has `display:block`, so that won't make a difference. – Mr Lister Dec 09 '12 at 18:22

score 0 · Answer 6 · answered Jul 27 '23 at 03:34

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>

when text exceeds width, continue in new line

6 Answers6

Linked