如果内容使用JavaScript超过html表格的固定宽度，则将文本拆分到下一行 [英] split text into the next line if content exceeds the fixed width for html table using JavaScript
问题描述
我试图实现一个布局，如果文本超出了表格的宽度td，它应该转到下一行。
但我不能这样做。我的代码是
<％@ page language =javacontentType =text / html; charset = UTF-8
pageEncoding =UTF-8％>
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENw3.org/TR/html4/loose.dtd\">
< html>
< head>
< title> HTML Div溢出滚动条< / 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>
函数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>垂直溢出滚动< / h3>
< table align =centerwidth =100％border = 1>
< tr>
< td>
< div class =mainDivid =mainDiv>
< table width =100％align =leftstyle =table-layout：fixed>
< tr>
< td height =200pxstyle =max-width：150px; valign =topclass =divScroll-1id =divScroll-1>
< / td>
< td valign =topclass =divScroll-2id =div33>
< / td>
< / tr>
< / table>
< / div>
< / td>< / tr>
< tr>
< td>
< input type =textid =nosize =20/>
< input type =buttononclick =getText（）value =插入文字/>
< / td>< / tr>< / table>
< / body>
< / html>
我使用Javascript将文本附加到表格中。如果我插入一个比td宽度大的长文本，其余文本将隐藏。
我需要将剩余内容放入下一行。
请给出一些建议或更正我的代码。
试试这个， stackoverflow
CSS：如何在< td> ;? 中包装没有空格的文本
更新您的css类，如下所示（divScroll-1）
.divScroll-1 {
空格：-moz-pre-wrap ！重要; / * Mozilla，自1999年以来* /
white-space：-pre-wrap; / * Opera 4-6 * /
空格：-o-pre-wrap; / * Opera 7 * /
空格：预包装; / * css-3 * /
word-wrap：打破单词; / * Internet Explorer 5.5+ * /
word-break：break-all;
空格：正常;
}
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.
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;
}
这篇关于如果内容使用JavaScript超过html表格的固定宽度，则将文本拆分到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
