Question

I have a div called #devices and I use ajax to populate it, but I’m having a bit of a styling problem, I append a json to the devices div like this:

$('#devices').html(json);   

I set the width of the devices in my css like this:

#devices
{
    border:thin solid #C7C7C7;
    padding:20px;
    width:600px;
}

I’m not sure what the width is going to be of the content since it can change when a user changes an element in a select box, how do I make it so the text will wrap inside the 600px-wide div?

Right now the content is printed on one huge line that extends across the page and out of the div,

Thanks!

Answer 1

You can use whitespace: pre-wrap.

Alternately, instead of inserting the JSON string directly into the #devices div, why not use jquery.tmpl or some other JavaScript templating engine to generate HTML for your devices list?