0

i have a datatable where the 9th column has very long string data, right now it is being displayed all in one line: enter image description here

Im trying to give this row better styling, and one solution I thought of was to have the row wrap to two lines of text instead of one long line of text. There are other questions on stackoverflow covering this topic, but none of the answers I've tried have worked, such as this answer: Wrap a text within only two lines inside div which suggests to use css styling like I am using below but doesnt make a change:

td:nth-child(9){
    white-space: nowrap;
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

https://jsfiddle.net/martinradio/a9bjtLkr/

Martin
  • 1,336
  • 4
  • 32
  • 69
  • you need to assign it a max-width for the column. – HW Siew Jun 24 '20 at 01:39
  • i assigned a max width in the css section of my updated jsfidde here but now it produces word overlap, tried to add the word wrap feature but no luck https://jsfiddle.net/martinradio/a9bjtLkr/4/ – Martin Jun 24 '20 at 02:35

1 Answers1

0

Try this.

td:nth-child(9){   
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
 }
HW Siew
  • 973
  • 8
  • 16
  • tried it with this jsfiddle and it didnt work https://jsfiddle.net/martinradio/a9bjtLkr/13/ – Martin Jun 24 '20 at 03:26
  • yes but Im trying to get it customizable so I can make the word wrap result in 2 lines instead of a long column stretching downwards, tried editing values like max-width: 800px; but it doesnt seem to be making a difference – Martin Jun 24 '20 at 03:32
  • hmmm interesting, ill have to look into the ellipsis feature, seems like it just cuts the text off but its a start thx – Martin Jun 24 '20 at 04:21