The problem of excessively long text ellipsis
1, demand: add ellipsis to some file names that are too long, and a floating layer appears when the mouse moves up, showing the complete text; if the name is short, the floating layer is not displayed when the mouse moves up.
2, the question is how to judge when floating layer needs to appear, the text is random, the display area can be fixed, I use css to omit, so ellipsis is fixed width, so there is no way to determine when floating layer occurs by judging the width.
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
3. Do you have any solutions?
whether omitted or not is written by css, showing whether the floating layer is determined by js.
can be sure that css will not raise js events, so it is impossible to use css to achieve ellipsis, so it is impossible to display floating layer accurately without omission.
so there are two alternatives:
scenario 1:
do not display floats precisely, such as setting a character length, such as 20, and displaying floats when more than 20. It can satisfy 95% of the cases
scenario 2:
does not use css to achieve ellipsis, but uses js to achieve ellipsis, such as ellipsis for more than a certain character. In this way, once the omission occurs, of course, the floating layer can be displayed with logical judgment.
of course, the above two solutions should consider the problem that Chinese characters are not as wide as English characters. It is recommended to use UTF-8 to determine whether they are Chinese characters one by one. If so, write it down as 2 characters, and the others as 1 character
.
provides an idea: the same text overlays 2 layers, the bottom layer adds too long ellipsis, and the upper layer does not add too long ellipsis, but the transparency is 0, so the mouse moves up to judge the width. It is suggested that the outer layer is wrapped with a parent element with 'overflow: hidden;', so that the floating layer will also be displayed to prevent the mouse from moving beyond the outer layer.
drew a picture. I don't know if I can understand
.
you can use a fixed number of words as a judgment condition, such as omitting more than 20 words, but I think you can basically add an ellipsis if the file name is more than 10 characters.
