Why text-overflow ellipsis does not work?

Text-overflow is (almost) always required to be used along with white-space: nowrap; property, and this is solution to your problem if you are reading this article.

check this jsFiddle

<style>
.not-working{
    text-overflow: ellipsis;
    width:200px;
    height:40px;
    border:1px solid red;
    overflow:hidden;
}

.working{
    text-overflow: ellipsis;
    width:200px;
    height:40px;
    border:1px solid red;
    overflow:hidden;
    white-space: nowrap;
}

</style>
<div class="not-working">
This is a large text i want this to wrap.
</div>

<div class="working">
This is a large text i want this to wrap.
</div>​

Thank You for reading.. enjoy