why doesn't my text-overflow property work?

Question

I set the outside div to inline-block and set the width of it to 20px. When I set the text-overflow property to ellipsis, it doesn't work. Why is that? here is the picture:

Answer 1

1) Use of overflow:hidden.

2) Use white-space: nowrap; for prevent from wrap text.

and also,in your case:

3) Use of width:45px. (Based on what I see on the picture,3 number is visible).

div {
    width: 45px;
    border: 1px solid #CCC;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

<div>23132313</div>