Question

I have to add a text value dynamically in a div tag of a HTML page. but if this text is too long then it doesn’t stay in its div width which I have assigned as 500px, but goes straight long in a single row and this makes the Web page to have a horizontal scroll. What should I do to fix the length of this text. I don’t mind if it increases number or rows.

Here is the Css:

.question
{
    width: 500px;
    height: auto;
    float: left;
    overflow: auto;

}
.answer
{
    width: auto;
    height: auto;
    float:left;
    overflow: auto;

}
#main
{
    width: 1000px;
    height: auto;
    overflow: auto;

}

Here is the JS code:

function create_div_dynamic(answer){

     var dynDiv = document.createElement("div");
     dynDiv.id = "divDyna"+counter;

     var question_data = question();
     var answer_data= answer();
     dynDiv.innerHTML="<div id='main'  ><div class='question'> "+question_data+" </div> <div class='answer'> "+answer_data+"</div> </div>"
     dynDiv.style.height = "auto";
     dynDiv.style.width = "auto";     
     dynDiv.style.backgroundColor = 'gray';
     document.body.appendChild(dynDiv);
     counter=counter+1;


    }

Answer 1

You could use the rule word-wrap in css:

ie:

word-wrap:break-word;

Although this is CSS3 and may not be supported in all browsers.