如果内容超过使用JavaScript的html表的固定宽度，则将文本拆分为下一行_Javascript_Html_Css_Jsp_Html Table

如果内容超过使用JavaScript的html表的固定宽度，则将文本拆分为下一行

javascript html css jsp

如果内容超过使用JavaScript的html表的固定宽度，则将文本拆分为下一行,javascript,html,css,jsp,html-table,Javascript,Html,Css,Jsp,Html Table,我有一个div，它由不同样式的表组成我试图实现一个布局，如果文本超过了表的宽度td，它应该转到下一行但我不能这么做。我的代码是 <%@ 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/

我有一个div，它由不同样式的表组成

我试图实现一个布局，如果文本超过了表的宽度td，它应该转到下一行

但我不能这么做。我的代码是

<%@ 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>


HTML Div溢出滚动条
梅因迪夫先生{
高度：230像素；
宽度：600px；
溢出：滚动；
}
.DIV-1{
宽度：70%；
空白：nowrap；
溢出y：滚动；
}
.1-2{
宽度：30%；
浮动：对；
空白：nowrap；
}
函数getText（）{
var str=document.getElementById（“no”）.value；
var div=document.getElementById（“divScroll-1”）；
var ss=document.getElementById（“div33”）；
var textarea=document.getElementById（“mainDiv”）；
如果（div.innerHTML==“”）{
div.innerHTML+=str；
}否则{
div.innerHTML+=“
”+str；
}
如果（ss.innerHTML==“”）{
ss.innerHTML=“时间”；
}否则{
ss.innerHTML+=“
”+“时间”；
}
}
垂直溢出卷轴

我使用Javascript将文本添加到表中。如果我插入一个大于td宽度的长文本，剩余文本将隐藏

我需要下一行的剩余内容

请给出一些建议或更正我的代码。

删除

空白：nowrap在css中。
试试这个，已经在stackoverflow上了

更新css类，如下所示（“divScroll-1”）
我搬走了。但很抱歉，没有发生任何更改。感谢您的回复。但我需要的文本应该在下一行，如果它超过了第一行的宽度。除了这将在任何时候打破的话（如“He y”），无论是否需要。因此，当有太长的单词时，它将保存您的布局，但它将使文本完全中断，即使在根本不需要的时候。
.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;
}