How do I set a text element to 0px width?

Question

In order to make transition effects, I would like to know if it is possible to set width to 0 pixel on a HTML element that contains text. When the user will click, the element will grow.

If I do this, the text will still appear which is not what I want :

 div { width: 0px; } 

 <div>Hello world!</div> 

Answer 1

The element is zero-width (as you can see by adding a border), but the text overflows the container so is still visible:

 div { width: 0px; border:1px solid } 

 <div>Hello world!</div> 

To correct this, add "overflow: hidden" to the element:

 div { width: 0px; overflow: hidden; } 

 <div>Hello world!</div> 

Answer 2

div {
  width: 0px;
  overflow-x: hidden;
}