CSS displays ellipsis when the text exceeds the width

Single-line text control, previously completed by programmers, achieves word cut effect. The method described today is compatible with IE and ff. For more information, see the following. To be more practical, use a div to install the content to be debugged and define a width for the div. For example:
Single-line text control, previously completed by programmers, achieves word cut effect. The method described today is compatible with IE and ff. For more information, see the following. To be more practical, use a div to install the content to be debugged and define a width for the div. For example:

CSS code:
Div {width: 200px ;}

HTML code:
<Div>
<Span> Chinese webmaster sky, webmaster site Park-www. zzsky </span>
</Div>

The implementation in IE is very simple:

CSS code:
SPAN {
Display: block;
Width: 200px;
Overflow: hidden;
White-space: nowrap;
Text-overflow: ellipsis;
}

However, the above style cannot be used in FF, because text-overflow: ellipsis; is unique in IE (non-CSS standard ). What we can see in FF is only to remove the overflow content. When it comes to "overflow removal", we will talk about the idea. In FF, we will need to use unconventional methods, A label is used to remove the content, and a label is added to fill the ellipsis, and the length of the sum can exceed the width of the container. In this example, the DIV width is PX, this is the idea of implementation. So let's continue the experiment. We have basically solved this problem about the cut-off content. Just fill in the ellipsis without JS. If we use CSS to implement it, we need to use a pseudo object after, if a pseudo object does not understand it, you need to take a look at the temperature or Baidu. Start with HTML and add a p tag to the span tag (you can also add other tags ).

Html code:
<Div>
<P> <span> Chinese webmaster sky, webmaster site Park-www. zzsky </span> <p>
</Div>

We will add a style for this P Tag:

Css code:
P: after {
Content :"...";
}

This is not enough, because the ellipsis has a width, so that the ellipsis jumps to the line. The following is to make the width of the span plus ellipsis not greater than the container width (accurate to equal ), and let the ellipsis keep up with the content. The following is the CSS style to solve the above problems:

Css code:
P {clear: both ;}
P span {
Float: left;
Max-width: 175px;
}
P: after {
Content :"...";
}

Here, we need to add that the "max-width" attribute is used for the width of p and span. IE cannot interpret this attribute, but FF can, this avoids the re-application of IE to the SPAN width. The above mentioned chaos is summarized as follows:

Html code:
<Div>
<P> <span> Chinese webmaster sky, webmaster site Park-www. zzsky </span> <p>
</Div>

Css code:
Div {
Width: 200px;/* basic definition of the container */
Height: 200px;
Background-color: # eee;
}
/* Style under IE */
P span {
Display: block;
Width: 200px;/* defines the width. Modify the width as needed */
Overflow: hidden;
White-space: nowrap;
Text-overflow: ellipsis;
}/* FF style */
P {clear: both ;}
P span {float: left;
Max-width: 175px;
}
P: after {
Content :"...";
}