split text into the next line if content exceeds the fixed width for html table using JavaScript
24,648
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;
}
Author by
Human Being
Always willing to learn the new things to enhance my knowledge .
Updated on September 19, 2020Comments
-
Human Being over 3 years
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.
-
Human Being over 11 yearsI removed . But sorry no changes happened.
-
Human Being over 11 yearsThanks for your reply.But I need the text should be in next line if it exceeds width of the first <td>.
-
matteo almost 11 yearsexcept this will break words at any point (e.g. "He y") whether it's needed or not. So it will save your layout when there are too-long words, but it will make the text completely broken even when it's not needed at all.