如果內容超過HTML表格的固定寬度，使用JavaScript將文本拆分到下一行

我有一個div，它包含應用了td的不同樣式的表格。如果內容超過HTML表格的固定寬度，使用JavaScript將文本拆分到下一行

我想實現一個佈局，如果文本超出了表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>

我使用Javascript將文本附加到表格中。如果我插入比td的寬度大的長文本，剩餘的文本將隱藏起來。

我需要剩下的內容進入下一行。

請給出一些建議或更正我的代碼。

來源

2013-01-03 Human Being

試試這個，已經在計算器

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

更新你的CSS類，如下所示（「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; 
}

來源

2013-01-03 13:20:11 ahmadkwench

，除了這會在任何點（例如「他們」）打破單詞是否需要。所以當文字太長時，它會保存你的佈局，但即使完全不需要文本，文本也會完全被破壞。 – matteo

刪除white-space: nowrap;在您的CSS。

來源

2013-01-03 09:34:01

我刪除。但遺憾的是沒有發生變化。 –

請檢查http://codepen.io/madevelopers/pen/kgoBl –

謝謝你的答覆。但我需要的文本應該在下一行，如果它超過第一個的寬度。 –

如果內容超過HTML表格的固定寬度，使用JavaScript將文本拆分到下一行

回答

相關問題