Why is this simple CSS div not working?

I have a div. It is really simple. Here is the CSS code below.

#example {
    background: #dcdcdc;
    background-position: center;
    postition: relative;
    width: 980px;
    text-align: center开发者_Go百科;
    margin: 0px auto;
    padding: 1px;
    min-height: 30px;
}

html code:

<div id="example">testtesttesttesttesttesttesttesttesttesttesttest</div>

As you can see it only contains text that is selected from a database table. The problem is that when the length of the text is wider than the screen it does not start a new line, it goes over. I want to make it start a new line. How could I do that?

Note: The overflow is hidden on the page. I only tested this page in Chrome 13 and FF 3.6.

---

Word wrap will do the trick:

word-wrap: break-word;

---

multi browser answer :

add this :

word-break: break-all;
white-space:normal;
 word-wrap: break-word;

---

Add word-wrap: break-word; into that mix.