---
title: "Text-overflow Property using CSS3"  
description: "In this blog I have tried to explain how to use overflow property using CSS3 and HTML.  The text-overflow property specifies what should happen when t"  
author: "Vijay Shukla"  
published: 2012-12-27  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/412/text-overflow-property-using-css3  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Text-overflow Property using CSS3

In this [blog](https://www.mindstick.com/articles/12705/myths-and-misconception-about-blog) I have tried to [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) how to use [overflow](https://www.mindstick.com/interview/1711/what-is-overflow-properties-in-css) [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) using [CSS3](https://www.mindstick.com/articles/1534/stylish-css3-progress-bars) and [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript).\

The text-overflow property specifies what should happen when text [length](https://www.mindstick.com/interview/1915/what-is-the-difference-between-char_length-and-length) overflows the containing element.

Here are [two text](https://www.mindstick.com/forum/161183/how-to-compare-two-text-in-sql)-overflows property [values](https://www.mindstick.com/forum/327/sum-textbox-values):

A. ellipsis: it will made the ellipsis when text length overflows the containing element.

B. Clip: it will Clips the text when text length overflows the containing element .

```
<!DOCTYPE html><html><head><style>div.demo{white-space:nowrap;width:12em;overflow:hidden;border:1px solid #CD853F;color:#CD853F;font-size:1.2em;}p{color:#CD853F;font-size:1.2em;}</style></head><body><p>In this div uses the style of "text-overflow:ellipsis":</p><div class="demo" style="text-overflow:ellipsis;">mindstick unleash your imagination</div>
<p>In this div uses the style of "text-overflow:clip":</p><div class="demo" style="text-overflow:clip;">mindstick unleash your imagination</div>
</body></html>
```

##### Below is Output:

![Text-overflow Property using CSS3](https://www.mindstick.com/blogs/f0930b95-484a-4653-a24d-a88815a8fbbb/images/4e7bd36f-e682-4889-b957-d3120a624c3c.png)

---

Original Source: https://www.mindstick.com/blog/412/text-overflow-property-using-css3

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
