title: split text into the next line if content exceeds the fixed width for html table using JavaScript
body: <p>I have a div, which consists of table with different styles applied td.</p>
  
  <p>I am trying to implement a layout, if the text exceeds the width of the table td, it should go over to the next line. </p>
  
  <p>But I can't do this. My code is</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%&gt;
      &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd"&gt; 
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;HTML Div Overflow scrollbars&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .mainDiv {
      height: 230px;
      width: 600px;
      overflow: scroll;
  }
  .divScroll-1 {
      width: 70%;
      white-space:nowrap;
      overflow-y: scroll;
  
  }
  .divScroll-2 {
      width: 30%;
      float:right;
       white-space:nowrap;
  
  }
  
  &lt;/style&gt;
  &lt;script&gt;
      function getText() {
          var str = document.getElementById("no").value;
          var div = document.getElementById("divScroll-1");
          var ss = document.getElementById("div33");
          var textarea = document.getElementById("mainDiv");
  
          if (div.innerHTML == "" ) {
              div.innerHTML += str ;
          } else {
              div.innerHTML += "&lt;/br&gt;"  + str ;
          }
  
          if(ss.innerHTML == ""){
              ss.innerHTML = "Time" ;
          }else{
              ss.innerHTML  +=  "&lt;/br&gt;"+"Time";
          }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h3&gt;Vertical Overflow Scroll&lt;/h3&gt;
  &lt;table align="center" width="100%" border=1&gt;
      &lt;tr&gt;
          &lt;td&gt;
  &lt;div class="mainDiv" id="mainDiv"&gt;
  
  &lt;table width="100%" align="left" style="table-layout:fixed"&gt;
      &lt;tr&gt;
          &lt;td height="200px" style="max-width:150px;" valign="top" class="divScroll-1" id="divScroll-1"&gt;
          &lt;/td&gt;
          &lt;td valign="top" class="divScroll-2" id="div33"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
  &lt;input type="text" id="no" size="20" /&gt;
  &lt;input type="button" onclick="getText()" value="Insert Text" /&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am appending the text into the table using Javascript. If I insert a long text bigger than the width of td, remaining text will be in hidden.</p>
  
  <p>I need the remaining content in to the next line.</p>
  
  <p>Please give some suggestions or correct my code.</p>