Bootstrap 3 truncate long text inside rows of a table in a responsive way

Question

I m using bootstrap 3 tables  when i put large text in the table it gets wrapped on several lines  but i want it to be truncated with three dots at the end in a responsive way without messing up the layout of the table  i found some solutions but with unpleasant effects    Is that possible   how    PS  any solution is welcome  but i would like it to be just HTML CSS if it s possible

User · Accepted Answer

I did it this way  you need to add a class text to  lt td gt  and put the text between a  lt span gt    HTML   lt td class  text  gt  lt span gt looooooong teeeeeeeeext lt  span gt  lt  td gt   SASS   table td text       max-width  177px      span           white-space  nowrap          overflow  hidden          text-overflow  ellipsis          display  inline-block          max-width  100             CSS equivalent   table td text       max-width  177px     table td text span       white-space  nowrap      overflow  hidden      text-overflow  ellipsis      display  inline-block      max-width  100       And it will still be mobile responsive  forget it with layout fixed  and will keep the original behaviour   PS  Of course 177px is a custom size  put whatever you need

User · Answer

You need to use table-layout fixed in order for CSS ellipsis to work on the table cells    table     table-layout fixed      table td     white-space  nowrap    overflow  hidden    text-overflow  ellipsis      demo  http   bootply com 9njmoY2CmS

User · Answer

This is what I achieved  but had to set width  and it cannot be percentual    x000D   x000D   trunc  x000D    width 250px   x000D    white-space  nowrap   x000D    overflow  hidden   x000D    text-overflow  ellipsis  x000D    x000D  table tr td   x000D  padding  5px x000D    x000D  table tr td   x000D  background  salmon x000D    x000D  table tr td first-child   x000D  background  lightsalmon x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   lt table gt  x000D         x000D         lt tr gt  x000D           lt td gt Quisque dignissim ante in tincidunt gravida  Maecenas lectus turpis lt  td gt  x000D         lt td gt  x000D            lt div class  trunc  gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  x000D            lt  div gt  x000D       lt  td gt  x000D           lt  tr gt  x000D         lt  table gt  x000D   x000D   x000D    or this  http   collaboradev com 2015 03 28 responsive-css-truncate-and-ellipsis

User · Answer

I m using bootstrap  I used css parameters    table     table-layout fixed      table td     white-space  nowrap    overflow  hidden    text-overflow  ellipsis      and bootstrap grid system parameters  like this    lt th class  col-sm-2  gt Name lt  th gt    lt td class  col-sm-2  gt hoge lt  td gt

[html] Bootstrap 3 truncate long text inside rows of a table in a responsive way

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to responsive-design