CSS control character width ellipsis effect compatible with browsers

CSS compatible with browsers controls the character width ellipsis, which is very practical. Because FF does not support the attribute that overflow displays ellipsis. Therefore, during encoding, a private attribute of hack and FF is applied. Pay attention to the difference during learning.

* {Margin: 0; padding: 0 ;}
A {text-Decoration: none; color: #000 ;}
A: hover {text-Decoration: none; color: #000 ;}
Ul {width: 300px; Height: 120px; margin: 40px auto; padding: 12px 4px 12px 24px; Border: 1px solid # d4d4d4; Background: # f1f1f1 ;}
Li {margin: 12px 0 ;}
Li a {display: block; width: 120px; overflow: hidden;/* do not write it at the end */white-space: nowrap;-o-text-overflow: ellipsis; text-overflow: ellipsis ;}
/* Firefox only */
Li: Not (p) {clear: Both ;}
Li: Not (p) A {max-width: 170px; float: Left ;}
Li: not (P): After {content: ""; float: Left; width: 25px; padding-left: 5px; color: #000 ;}