Home/ Questions/Q 9090751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:26:55+00:00

I have a div, which consists of table with different styles applied td. I

  • 0

I have a div, which consists of table with different styles applied td.

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.

But I can’t do this. My code is

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>HTML Div Overflow scrollbars</title>
<style type="text/css">
.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;

}

</style>
<script>
    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 += "</br>"  + str ;
        }

        if(ss.innerHTML == ""){
            ss.innerHTML = "Time" ;
        }else{
            ss.innerHTML  +=  "</br>"+"Time";
        }
    }
</script>
</head>
<body>
<h3>Vertical Overflow Scroll</h3>
<table align="center" width="100%" border=1>
    <tr>
        <td>
<div class="mainDiv" id="mainDiv">

<table width="100%" align="left" style="table-layout:fixed">
    <tr>
        <td height="200px" style="max-width:150px;" valign="top" class="divScroll-1" id="divScroll-1">
        </td>
        <td valign="top" class="divScroll-2" id="div33">
        </td>
    </tr>
</table>
</div>
</td></tr>
    <tr>
        <td>
<input type="text" id="no" size="20" />
<input type="button" onclick="getText()" value="Insert Text" />
</td></tr></table>
</body>
</html>

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.

I need the remaining content in to the next line.

Please give some suggestions or correct my code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this, already on stackoverflow

    CSS: How do I wrap text with no whitespace inside a <td>?

    update your css class as follows (“divScroll-1”)

    .divScroll-1 {
     white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     white-space: pre-wrap;       /* css-3 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
     word-break: break-all;
     white-space: normal;
}
    • 0