CODEWITHSUNDEEP
csscss-position
Blake
Blake

Reputation: 7547

Text goes outside containing div

I have this codepen here, shouldn't the text goes to new line when it reaches the right border of div?

html:

<div class="test">

    <p>dfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodj</p>
</div>

css:

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;

}

Upvotes: 3

Views: 47922

Answers (6)

Dwipa Arantha
Dwipa Arantha

Reputation: 103

Because the text doesn't have any space, so it won't create a new line.

Try to put:

[space]/(&nbsp;)/(&#160;)

For example, I changed my text from:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

into:

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx

It will create its own new line.

Upvotes: 0

Sam
Sam

Reputation: 389

You can do width:auto;, but if you want specific width:400px; you can use word-wrap:break-word or word-wrap:break-all;

Upvotes: 0

Josh Harris
Josh Harris

Reputation: 446

I had this same issue, word break didn't look too pretty for me - so I found applying the below CSS to the container worked:

 text-overflow: ellipsis;
 overflow: hidden;

ellipsis has good browser support too, read more about ellipsis here

Upvotes: 1

Dennis
Dennis

Reputation: 8111

in my case it turned out to be this:

something&nbsp;something

counts as a single long word and hence went outside the div

Fixed it by doing

something&nbsp; something

Upvotes: 0

Elad Shechter
Elad Shechter

Reputation: 4055

Live Example http://codepen.io/elad2412/pen/LAhJw

div.test {word-break:break-all;}

Upvotes: 2

amol
amol

Reputation: 1555

Use word-wrap:break-word

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;
    word-wrap:break-word;
}

Upvotes: 11

Related Questions