CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3314800
user3314800

Reputation: 3

Jquery CSS width after append

I have a problem with the width of a div after using append in Jquery.

HTML:

<div id="myid"></div>

JQUERY: 

var uhm = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
$("#myid").append(uhm);

CSS: 

#myid {
   width:200px;
   border:1px solid red;
}

http://jsfiddle.net/migueladan/8eXHT/

I need that the content of the variable stay within the width of the div (all in the red rectangle)

How can I solve this?

Upvotes: 0

Views: 338

Answers (3)

Dalorzo
Dalorzo

Reputation: 20024

Maybe this is what you want;

#myid{
    width:200px;
    border:1px solid red;
    word-break:break-all;
}

http://jsfiddle.net/8eXHT/9/

enter image description here

Upvotes: 0

Marcel
Marcel

Reputation: 1288

Use display:inline-block; to resize:

http://jsfiddle.net/8eXHT/5/

Use overflow: hidden; if it needs to remain 200px and you want to hide:

http://jsfiddle.net/8eXHT/1/

Use word-break:break-all; if it needs to remain 200px but it is allowed to increase in height:

http://jsfiddle.net/8eXHT/8/

Upvotes: 0

Thomas Junk
Thomas Junk

Reputation: 5676

It is a little bit unclear, what exactly you want. But maybe overflow is what you are looking for. Here is an updated version of your fiddle.

Upvotes: 0

Related Questions