Menu
Solution with the CSS word-wrap propertyUse the border-collapse property set to "collapse" and table-layout property set to "fixed" on the <table> element. Also, specify the width of the table. Then, set the word-wrap property to its "break-word" value for <td> elements and add border and width to them.
Click the table. Click the Table Layout tab, and then under Settings, click Properties. Under Text Wrapping, click Around. To set the horizontal and vertical position of the table, the distance from surrounding text, and other options, under Text Wrapping, click Positioning, and then choose the options that you want.
You can try specifying a width for the div, whether it be in pixels, percentages or ems, and at that point the div will remain that width and the text will wrap automatically then within the div.
Select the table and either right-click and choose “Table Properties” or pick “Properties” in the floating toolbar. Go to the Table tab in the pop-up window. In the Text Wrapping section at the bottom, select Around and click “OK.” You'll immediately see your table and text move to accommodate each other.
Use table-layout:fixed in the table and word-wrap:break-word in the td.
See this example:
<html>
<head>
<style>
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>2</td>
<td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
</tr>
</table>
</body>
</html>
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;} <table>
<tr>
<td>1</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>2</td>
<td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
</tr>
</table>
Its works for me.
<style type="text/css">
td {
/* css-3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}
And table attribute is:
table {
table-layout: fixed;
width: 100%
}
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
This worked for me when I needed to display "pretty" JSON in a cell:
td { white-space:pre }
white-space property:
normal: This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
pre: This value prevents user agents from collapsing sequences of white space.
Lines are only broken at preserved newline characters.
nowrap: This value collapses white space as fornormal, but suppresses line breaks within text.
pre-wrap: This value prevents user agents from collapsing sequences of white space.
Lines are broken at preserved newline characters, and as necessary to fill line boxes.
pre-line: This value directs user agents to collapse sequences of white space.
Lines are broken at preserved newline characters, and as necessary to fill line boxes.
(Also, see more at the source.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With