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/
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).overflow-wrap
property may be what you want if you're finding this question. See stackoverflow.com/a/3059128/16940