Summarize the Text-overflow property in CSS

Grammar:
Text-overflow:clip | Ellipsis
Parameters:
Clip: Do not display the ellipsis tag (...). ), but a simple cut
Ellipsis: Displays ellipsis (...) when text inside an object overflows. ）
Description
Sets or retrieves whether an ellipsis tag (...) is used. ) indicates an overflow of text within the object.
The corresponding script attribute is textoverflow. Please refer to the other bibliography I have written.

Example:

div {text-overflow:clip;}

How to achieve the effect of Text-overflow in CSS2.1

Looks good, let's test it.

<div style= "width:100px;height:20px;text-overflow:ellipsis; ">a b c D E F g h i j K L, MSA SD SD SA w DF F </div> <div style=" Width:100px;height:20px;text-overflow:ellip Sis White-space:nowrap; Overflow:hidden; ">a b c D E F g h i j K L, MSA SD SD SA w DF F </div>

This time, it's normal to show.
The Text-overflow property is only annotations, and whether the ellipsis is displayed when text overflows. No other style attribute definitions are available. We want the effect of an ellipsis to occur when the overflow is implemented. You must also define: Force text to appear on one line (white-space:nowrap) and overflow content to be hidden (Overflow:hidden). This is the only way to achieve an overflow text display ellipsis effect.
First, only define text-overflow:ellipsis; The ellipsis effect cannot be achieved.
Second, the definition of text-overflow:ellipsis; White-space:nowrap; Also cannot achieve the ellipsis effect
Third, according to the 52css.com tutorial, that is, the method described herein, at the same time application: text-overflow:ellipsis; White-space:nowrap; Overflow:hidden; Achieve the desired overflow text display ellipsis effect:

div automatically adapts to width and uses text-overflow instances

<style> #all {float:center; text-align:left; overflow:hidden;} #a {float:left; text-align:left; width:100px; height:50px; BORDER:1PX solid black; Text-overflow:ellipsis; White-space:nowrap; Padding-bottom:10000px;margin-bottom: -10000px;} #b {float:left; width:40px;height:50px; border:1px solid black;padding-bottom:10000px;margin-bottom: -10000px;} </ Style>