CSS restriction single line text input, out of section use ... Replace

In practical applications, it is often necessary to display only a single line of text, which does not allow text wrapping to break the overall style. For example ' name of product ', ' introduction ' and so on. However, due to the different width of the display, the text content will appear in the background, a line of text can not accommodate the situation. Overflow text If use Overflow:hidden blunt to hide, show the effect is not very good, at this time, overflow of text need to use ellipsis ... To replace it. The use of JS interception is a bit complex, you can directly use the CSS properties to set up to achieve this effect.

The CSS properties you need to add to the text object are as follows:

<p class= "ClassName" > Casual solid color pleated shorts </p>

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

The results shown are as follows:

CSS restriction single line text input, out of section use ... Replace