CODEWITHSUNDEEP
htmlcss
markzzz
markzzz

Reputation: 47945

How can I force text in a new line?

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

Upvotes: 2

Views: 8868

Answers (3)

Md Adilur Rashid
Md Adilur Rashid

Reputation: 740

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

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

enter image description here

Upvotes: 0

RicksMyCodeGuy
RicksMyCodeGuy

Reputation: 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

Upvotes: -1

dax
dax

Reputation: 10997

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/

Upvotes: 5

Related Questions