split text into the next line if content exceeds the fixed width for html table using JavaScript

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/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.

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/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 Improve this question edited Sep 18, 2017 at 18:38 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jan 3, 2013 at 9:18 Human Being 8,38728 gold badges97 silver badges140 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 12

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;
}

remove white-space: nowrap; in your css.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

split text into the next line if content exceeds the fixed width for html table using JavaScript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)