This determines what happens to text which doesn't fit into an element or box and the overflow is hidden.
text-overflow: ellipsis - adds three dots ..
text-overflow: clip - clips the text inside the box
The following examples also require white-space: nowrap AND overflow: hidden for them to work:
This allows an element to be resized by the user. It uses resize:both and overflow:auto to fill the box as you move it around.
This example uses both text-overflow and resize.
This allows long words to be broken and placed on the next line. Very useful for languages that have very long words and few spaces (Thai is an example of a language that can benefit from word-wrap)
CSS3 now allows you to change the size of an image in the background of an element (previously it was just the default size of the image so it had to be resizes)
Now you can position the origin of the image in relation to the border, padding or content. This becomes useful when you have an element with lots of padding and you want to get the image right to the edge of the padding.
which refers to the following CSS3 box model:
Now that you can position the image in an element, you can also clip it, or cut the image at the edges to either the padding-box, border-box or content-box (see image above for the CSS3 box model of each of these boxes)
Multiple background images
And to add even more excitement to background images - you can also add more than one background image to each element with a comma separating the url source for each image file.
This is not a CSS3 property (it's actually CSS1) but it fits nicely into this category and determines if the image in the background of an element scrolls with the content if you have overflow:scroll giving the box scroll bars.
For other CSS3 styles check out the following posts: