CSS strange text overflow issue

Hi,

I have a problem with my CSS and i'm completely confused as to why it's happening. I'm trying to add a paragraph within a list tag, which has a width of 200px, but if I have a long line of text inside it like:

<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

It overflows the 200px width I set, but if I add spaces in the line of text it seems to wrap around correctly? e.g.

<p>aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa</p>

Sort of wraps like it should do, why does it behave differently with a line of text with no spaces?

Heres my CSS:

p {
  display:inline-block;
  width:200px;
  background:green; /* to tell if the text overflows */
  vertical-align:top;
}

Now I know I don't need a long line of text like this in a paragraph but after noticing it I wanted to know if there was a style I could use to stop something like this from happening? It would be nice if the text wraps like normal even if it is a long line like that.

Any suggestions?

Thanks