Bootstrap-table: is there an option to hide cell content when it's too long?

Created on 16 Jul 2016  路  8Comments  路  Source: wenzhixin/bootstrap-table

Hi all,

I'd like to know how to show only the first several characters, and hide (not wrap) the text/string afterwards when the cell content is too long, like Excel?

a jsFiddle example

Thanks.

awaiting reply help-wanted

Most helpful comment

Is this a way for you ?
http://jsfiddle.net/e3nk137y/7635/

All 8 comments

Is this a way for you ?
http://jsfiddle.net/e3nk137y/7635/

@DustinUtecht thanks! that's great.

@DustinUtecht sorry, i found another problem about your suggested solution, which is, when I want to export the table, it will only download table with the partial display not the full content.......

@bambooom Provide an example with that issue related to export the table, please

Try this:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

https://jsfiddle.net/bambooom/a63Ltxd4/5/

tried, it won't wrap the content, also won't hidden....
and, I can't make export function working on jsFiddle .... refused to execute

@bambooom - you need to define a maximum width for the td themselves if you want to use relative sizing and stop the responsive nature of bootstrap css tables, this was also mentioned in relation to min sizes in the doco

Uses generics or add classes to specific columns (cell-style option also works, seems a little excesive to add inline to every single cell)

http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

max-width: 50px;

width
data-width
Number {Pixels or Percentage}
undefined
The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this 'width' might be ignored (use min/max-width via class or such then). Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, leave as number (or add 'px') to make it use pixels.

Hi! We don't have any reply in that case we are going to close this issue. If the issue is still present please open a new Issue or PR. Thanks!

Was this page helpful?
0 / 5 - 0 ratings