div内容溢出问题

<style type="text/css">
            div
            {
                margin: 5px 0;
                overflow: hidden;
                width: 100px;
            }
           
            div.a
            {
                border: 1px solid red;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            div.b
            {
                border: 1px solid green;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                white-space: nowrap;
            }
            div.c
            {
                border: 1px solid blue;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
        </style>
        <div class="a">abcdefg1234657891011121314151617181920</div>
        <div class="b">abcdefg1234657891011121314151617181920</div>
        <div class="c">abcdefg1234657891011121314151617181920</div>
        <div class="c">abcdefg1234657891011121314151617181920</div>