How can I force text in a new line?

Question

I have this div:

<div class="text">
    Thisismytextwontgoinanewparagraph
</div>

with this CSS:

.text
{
    background-color:red;
    width:100px;
}

As you can see in this JSFiddle, the text goes outside of the div.

Is there a way in CSS to force wrapping for a text without spaces (such as a hyperlink)?

And what does your question have to do with a 'new paragraph'? — David Thomas, Oct 07 '13 at 14:03
Sorry, dunno how to say in english "new line". Maybe just "new line" ;) — markzzz, Oct 07 '13 at 14:04
@DavidThomas: paragraphs are often indicated with a line break. — Paul D. Waite, Oct 07 '13 at 14:04
possible duplicate of [What's the opposite of a nbsp?](http://stackoverflow.com/questions/2046530/whats-the-opposite-of-a-nbsp) — Jukka K. Korpela, Oct 07 '13 at 14:21
This question has probably been asked dozens of times at SO, mostly with wrong answers (like here). I’ve suggested that this be marked as a duplicate of a question that has reasonable answers, even though the question title is a bit obscure. — Jukka K. Korpela, Oct 07 '13 at 14:22

score 4 · Accepted Answer · answered Oct 07 '13 at 14:04

4

you could try this, but it's not very pretty:

.text
{
    background-color:red;
    width:100px;
    word-wrap: break-word;
}

answered Oct 07 '13 at 14:04

dax

The code breaks the string at arbitrary points. This is seldom acceptable, and surely not for URLs (which is what the question probably means by “such as a hyperlink”). – Jukka K. Korpela Oct 07 '13 at 14:12
thus, " but it's not very pretty" – dax Oct 07 '13 at 14:13
You can make certain elements unbreakable with `white-space:nowrap`, like in this fiddle: http://jsfiddle.net/keaukraine/JsNgQ/ – keaukraine Oct 07 '13 at 14:17

1 Answers1