Limiting amount of text visible in a column

How can I limit the amount of text shown in a column? My form allows users to enter up to 1024 characters in a Remarks field which I can use CSS styling elsewhere on an input field to add an ellipsis (…) before overflowing (hidden). Can I do something similar with a table column?

This is what it looks like now:

This is what I’d like to do:

I use CSS like this on my input fields:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

I don’t think the data-width attribute is sufficient, and I can’t trim the text as the field includes HTML markup and I don’t want to lose any formatting tags.

[atomkind]

Does make sense.

Just question a search enginge for CSS solutions, they are similar:

Google “css ellipsis table cell”

W3C Answer

[RossAWaddell]

If you want it always the same width, juste just width: 250px in your CSS. If you want to be sure and safe, use all you can like min-width: 250px; max-width: 250px; width: 250px;. Thats overpowered but will also work 😉 Or you want this column(s) to have a range use min-width: 100px; max-width: 250px;

If you have a CSS class for ellipse, just use the class in the header-th column where you need it. And you dont need data-width because you declare the whidth in the css class tblColEllipsis.

All table-cells in this column will have the same class: https://live.bootstrap-table.com/code/atomkind/6182

Thanks! I’ll try using a range like you suggested.