I'm around and round we go
Moderator
Dec 10, 2013 11:03:13 GMT -5
So my professor told me to look this trick up, which I originally thought was just possible with javascript.
If text is too long in a box/div/area, you can truncate it with ellipsis using just CSS!
css-tricks.com/snippets/css/truncate-string-with-ellipsis/I've used it a few times on SI already, thought I'd share because sometimes you just can't control the content, but having this little tool helps
.truncate {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Dec 10, 2013 11:10:57 GMT -5
I'm not sure what this does
I'm around and round we go
OP
Moderator
Dec 10, 2013 11:16:24 GMT -5
It doesn't allow text to go beyond a specific point, but instead "truncates" it with an ellipsis, or three dots ( ... )
For example,
Xikeon is a really long name. So in the "last post" column on the thread list page, I truncated his name so it doesn't stretch the column.
Dec 10, 2013 13:33:46 GMT -5
Oh! So it just depends on the size of the container? Not a character count or anything? That's neat.
Dec 10, 2013 14:23:05 GMT -5
Yeah, I use this on mobile designs quite often. Great feature
Dec 10, 2013 16:39:48 GMT -5
Wait, is this a CSS3 property or has it always been around? I've never seen it used before.
Dec 12, 2013 2:11:17 GMT -5
I believe it's a CSS3 property..