<p> when text exceeds width, continue in new line
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;
Related videos on Youtube
Dragan
Updated on July 09, 2022Comments
-
Dragan almost 2 years
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 over 11 yearsNo I would like it to overflow per word
-
Mr Lister over 11 yearsBut that's what this example does. I thought you wanted each letter on a new line.
-
Mr Lister over 11 yearsWait 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). -
aruno over 2 years
overflow-wrap
property may be what you want if you're finding this question. See stackoverflow.com/a/3059128/16940
-
-
Mr Lister over 11 years
p
already hasdisplay:block
, so that won't make a difference. -
th3an0maly over 2 yearsThis works, when combined with
max-width: Xpx
.