Wednesday, January 29, 2020

css trickery: ellipsis for the FRONT of the string, not the end...

Or should I say
...not the end

One bit of infuriating design laziness of github is this:

For mysterious reasons, the full file path is limited to 600px, and then uses CSS ellipsis to hide the rest... you know, the rest, like where the actual file name is, vs the path blah blah blah that's the same for every file.

One easy fix comes from davidwalsh.name/css-ellipsis-left:
.ellipsize-left {
    /* Standard CSS ellipsis */
    white-space: nowrap;                   
    overflow: hidden;
    text-overflow: ellipsis;  
    width: 200px;
    
    /* Beginning of string */
    direction: rtl;
    text-align: left;
}
I highlighted the new bit, beyond the standard ellipsis.

Heh, I remember my old trunkit jQuery hack for this, that would surgically lop off stuff til text fit, and then would reappear on hover...

No comments:

Post a Comment