Text overflow failure

Use scenarios ： use … Replace extra text

css Method

           text-overflow: ellipsis;
           overflow:hidden;
           white-space: nowrap;

But it is not effective in the form ！！！

If in css Method to add display：block And a fixed width ok！

           display: block;
           width: 100px;
           text-overflow: ellipsis;
           overflow:hidden;
           white-space: nowrap;

Why is that ？

1. In simple terms ,tr,td Both inline and block level elements .
2. Because they can set their width and height , However, you cannot set its padding.
3. We are using display：block After that, it is equivalent to converting row level elements into block level elements , And set the width for it .
4. because overflow,text-overflow The use of is to truncate and hide the text or area relatively .