CSS3 text is out of bounds after an ellipsis appears

Clip: When inline content overflows the block container, the overflow is trimmed off.

Ellipsis: When inline content overflows the block container, replace the overflow part with the (... ）。

When the block container < ' overflow '> < ' text-overflow ' > attribute is in effect, the block container must explicitly define < ' overflow ' > as a non-visible value, while explicitly or implicitly defined &L t; ' width ' > is a non-auto value, < ' White-space ' > is a nowrap value.
We will text-overflow the necessary 3 properties: < ' overflow ' >, < ' width ' > and < ' white-space ' > are defined directly on the parent block container of the inline content

 <! DOCTYPE html>.test Li{margin -top:10px;}. Test. Clip p{overflow:hidden;width:200px;white -space:nowrap;text-overflow: Clip;}. Test. Ellipsis p{overflow:hidden;width:200px;white -space:nowrap;text- overflow:ellipsis;}  </style>
Original source: http://gucong3000.github.io/css-book/properties/user-interface/text-overflow.htm
CSS3 text is out of bounds after an ellipsis appears