Limit TD text length

Question

I've a grid generated by backgrid.

And I want to limit text length, each td must be on one line.

width property on td has no effect.

Thanks for your help.

enter image description here

You can use `white-space:nowrap` and `overflow-x:hidden` for the `td`, that should hide extra characters and it won't break into a new line. Edit : Didn't see an answer has already been given. — Billy, Jun 26 '15 at 11:03

score 10 · Accepted Answer · answered Jun 26 '15 at 10:46

Depending on how you define 'limit', you can simply prevent wrapping, and control overflow:

td{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

This will keep contents to one line, with an ellipsis being appended to the end if textual content exceeds the allowed width of the td

score 1 · Answer 2 · answered May 15 '21 at 03:34

you need to put 'td' tag's text in 'p' tag and give td tag a class like <td class="content_td"><p>Your text</p></td> then you can write in CSS like

.content_td p {
    max-width: 100%;
    max-height: 100px;
    overflow-y: scroll;
    text-overflow: ellipsis;
}

2 Answers2