Ellipsis (CSS) displayed when the width is exceeded)

When I visited the Hemin blog, I saw an interview question. I checked the effect of displaying the ellipsis over the width and found this CSS version on the Internet. Of course, there are also JS version solutions, which are simple, but this idea is exquisite and worth collecting!
The basic principle is: when the text content in the container exceeds the width of the container, the text will wrap, and an overflow: Den den attribute will be given to the container, and the line feed will not be displayed. OK! Next is the most exciting part. See the Code:

Code
  . List ul {
Font-size: 12px;
Font-family: simsun;
Text-align: left;
Line-Height: 18px;
Width: 11em;
Background: # FFF;
}
. List Li {
Height: 18px;
Overflow: hidden; // when a is opened, only the upper part is displayed.
Position: relative;
Padding-left: 1em;
Background: URL (...) No-repeat 3px 6px;
}
. List {
Display: block;
Padding-Right: 1em; // to accommodate Span
Background: URL (...) Right top no-Repeat;
Position: relative;
Zoom: 1;
Word-break: Break-all; // Chinese characters, letters, and numbers
}
. List a span {
Position: absolute; // span floating,
Right: 0em;
Bottom: 0; // span close to the bottom boundary
Height: 18px;
Width: 1em;
Background: # FFF; // the background color is the same as that of a to block span.
Overflow: hidden;
}
 
The Code may not be clear. Let's take a look:
 
I believe it is clear again.
This is a fascinating idea!
Source: http://bbs.blueidea.com/thread-2915238-1-1.html