Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap table ellipsis
.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!

@andreuerj
Copy link

andreuerj 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.

@andreuerj
Copy link

andreuerj commented Sep 29, 2018

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;
}

@AlaaProg
Copy link

AlaaProg commented Jan 8, 2019

Thanks! ^_^

@nickffcom
Copy link

nickffcom commented Dec 29, 2021

thanks bro manyy hihi

@YoverMarkt
Copy link

YoverMarkt commented Feb 23, 2022

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