CSS / HTML text wrap for webkit

I am trying to achieve the same effect facebook has开发者_如何学JAVA with wrapping your status if it's too long. Try to set your status to something like 300 "A" characters with a webkit user agent. How do they do that?

Yes... I know you can use: word-wrap: break-word

I googled alot and all these tricks only work if you can set the width in advance, which I cannot. My width is adjusting to 100% screen size to allow stretching when resizing (landscape).

So to sum this up, how can I achieve text wrap without giving a specific width to the element or a parent element, without using JS, under webkit only browser?

I could notice that FB use this property on the parent container:

-webkit-box-sizing: content-box

But I was not able to apply this to my case...

I would assume it's done this way with a server side language before given to the front-end. You typically want to stay away from content manipulation when you have such a large user base. There is a new CSS3 property that will do this for you, but it's not widely supported.

text-overflow:ellipsis;

More info can be found via Google

I think I know what you are looking for,

The trick is the combo of:

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

See this jsfiddle for a demonstration http://jsfiddle.net/bPsav/