css limits single line text input, use... to replace the excess part

　In practical applications, it is often necessary to display only one line of text and not allow text wrapping to destroy the overall style. For example, 'name of product', 'introduction', etc. However, due to the different widths of the monitors, there may be situations where the text content provided in the background cannot be accommodated in one line of text. If the overflow text is hidden abruptly using overflow:hidden, the display effect will not be very good. At this time, the overflow text needs to be replaced with an ellipsis... Using js to intercept is a bit complicated. You can directly use css attributes to set it to achieve this effect.

　The css attributes that need to be added to the text object are as follows:

Casual solid color versatile shorts

.className{width: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

The displayed effect is as follows: