simple CSS question

Question

In the index file I have this :

<div id="head">
<h1>bla bla bla bla bla bla</h1>
</div>

And I style it like this:

#head{
  height : 100px;
  width : 100%;
  overflow:hidden;
  background-color: #FFCC99;
}


#head h1 {
  margin-left : 20px;
  font-family : Georgia;
  font-size : 40px;
}

The problem is that when the screen is too small the end of the text goes under like this:

bla bla bla bl
a bla bla

and what I want to happen is just to fade awaya like :

bla bla bl

and the rest of the text just not to be shown untill the screen is resized again.

Answer 1

You need to add this to your h1 css:

white-space: nowrap;

Answer 2

add

overflow: hidden;
width: 100px; /*or whatever width you want*/

to your <h1>css statement.

It will not hide anything as you haven't told it what size width you want to hide from? Setting the width will allow you to accomplish this.