CSS implements DIV ultra-long truncation and displays..., cssdiv truncation ..

CSS implements DIV ultra-long truncation and displays..., cssdiv truncation ..

The content displayed in the DIV is sometimes too long and the page is ugly,

The previous practice was to determine the length in JS or in the background. If it is too long, it will be truncated,

However, because the width of Chinese and English numbers is not the same, the truncation length can only be the minimum value,

The display effect is not good either. The method provided by CSS can perfectly solve this problem.

1. project-Name {2 width: 280px; 3 overflow: hidden; 4 text-overflow: ellipsis; 5 white-space: nowrap; 6}

The width must be defined here,

Overflow: hidden; indicates that the extra-long part is not displayed.

Text-overflow: ellipsis; indicates ultra-long display...

White-space: nowrap; indicates no rows are displayed.

This style can also be applied to some other labels. It is best to use it on tags that can be added with TITLE,
Because you can add a TITLE to display all the information.