CODEWITHSUNDEEP
cssprimereact
Micah Gideon Modell
Micah Gideon Modell

Reputation: 629

How to wrap text in a cell in a datatable?

I've got variable length text being displayed in a column within a PrimeReact DataTable. In my experimentation, the following:

table {
  max-width: 100%;
  width: 100%;
}

td{
  height: auto;
  word-wrap: break-word;
}

causes the table to scroll horizontally, while the following:

table {
  table-layout: fixed;
  max-width: 100%;
  width: 100%;
}

tr{
  height: auto;
  word-wrap: break-word;
}

td{
  height: auto;
  word-wrap: break-word;
}

causes the text to be cut off if it goes too long. How can I get the text to wrap and grow in height? Barring that, how can I detect if it's too long so I can throw in an ellipsis […] and hover-text with the full text?

Upvotes: -1

Views: 954

Answers (2)

Michael Nwuzor
Michael Nwuzor

Reputation: 113

Thank you Micah Gideon Modell (@micah-gideon-modell) for posting this question.

Although I tried all the responses posted here and other pages but none resolved my own text wrap issues until I came across this simple CSS code

text-wrap: pretty;

Applying it to my datatable as seen below resolved my issues.

<td style="text-wrap: pretty;">....my php text here....</td>

Please note that applying using wrap in place of pretty like this style="text-wrap: wrap;" will also do the work.

The image below shows my datatable before I applied the css

enter image description here

The image below shows my datatable after I applied the css

enter image description here

For more help on this please visit https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

I hope this helps someone

Upvotes: 1

Micah Gideon Modell
Micah Gideon Modell

Reputation: 629

It turns out there was css that was applying text-wrap: nowrap for some reason. I applied wrap to that cell and all is now good in the world.

Upvotes: 0

Related Questions