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 5 · Accepted Answer · answered Oct 07 '13 at 14:04

5

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

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

http://jsfiddle.net/esGEn/1/

answered Oct 07 '13 at 14:04

dax

10,779
8
51
86

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

Md Adilur Rashid · Answer 2 · 2022-08-29T09:42:17.500

0

Why not just use ellipsis with overflow hidden? That will also look pretty.

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

edited Aug 29 '22 at 09:42

answered Aug 29 '22 at 09:35

Md Adilur Rashid

700
7
13

RicksMyCodeGuy · Answer 3 · 2022-08-24T16:03:49.580

-1

Here is how I did it. I added the <br> tag to the text I wanted to push to the next line. <p> Sleek custom designs and durable functionality. <br>Let your headwear work for you. </p> text multiple lines example

edited Aug 24 '22 at 16:03

answered Aug 24 '22 at 16:01

RicksMyCodeGuy

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 29 '22 at 11:37

How can I force text in a new line?

3 Answers3