0

How can one change the text from displaying like abcdefghijklmnopqrstuvwxyz in a cell to :
abc
def
ghi
...?
I can either hide some of the text (abcdef...) or make it appear as a verry ugly long cell. I would like to do so in HTML or CSS. I already tried playing with line-height, height, display,...
Example code: http://jsfiddle.net/9jwMZ/1/ (I am referring to the Message column).
For example, why isn't this code working?: 

table.DataTable tr {
    line-heigth: 100px;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nick46879854
  • 3
  • 1
  • You would need to add some spaces to the text, maybe with javascript or from the server, and remove the `white-space: nowrap` property to the `td` declaration. The problem is with the file paths. – marlenunez Jun 03 '13 at 22:16

2 Answers2

1

To force table cell contents to wrap, apply table-layout: fixed to the table and word-wrap: break-word to the td.

Additionally, if you'd like the cells to have a fixed vertical height and scroll when they overflow, wrap your td contents in a div with overflow: auto and max-height: 100px.

Here's the Fiddle: http://jsfiddle.net/9jwMZ/6/

butch
  • 2,178
  • 1
  • 17
  • 21
1

Look at this: http://jsfiddle.net/leemeador/9jwMZ/7/

I got the CSS from here: How to wrap text using CSS?

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;

I also removed your fixed width on the TD and fixed height on the TR

Community
  • 1
  • 1
Lee Meador
  • 12,829
  • 2
  • 36
  • 42