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