Skip to content

Instantly share code, notes, and snippets.

@marcoskubis

marcoskubis/table-ellipsis.css

Created February 24, 2017 13:08
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcoskubis/4bf343928703824d85d0ec1b301f3a63 to your computer and use it in GitHub Desktop.
Save marcoskubis/4bf343928703824d85d0ec1b301f3a63 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap table ellipsis
Raw
table-ellipsis.css
.table.table-ellipsis tbody td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
@codesxt
Copy link

codesxt commented Jan 6, 2018

This saved me a lot of work. Thanks!

@andrevgm
Copy link

andrevgm commented Sep 1, 2018

Nice!

Suggestion: You could enhance it using CSS pseudo class active to simulate “onclick/selection”.
After onclick/selecting the text, it could expand itself and showing the whole content.
If users decide to click/select another cell/value, the ellipsis could be applied again.

@andrevgm
Copy link

Show text-overflow on cell hover:

.table.table-ellipsis tbody td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}

.table.table-ellipsis tbody td:hover {
text-overflow: clip;
white-space: normal;
word-break: break-all;
}

@alaa-aqeel
Copy link

Thanks! ^_^

@nickffcom
Copy link

thanks bro manyy hihi

@YoverMarkt
Copy link

Gracias me ayudo mucho, saludos desde Ecuador.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment