Another version of Firefox has been released and with it another nice new CSS3 property: text-overflow: ellipsis;. This will allow you to display an ellipsis (…) if any text overflows its containing element, making something which used to have to be done with JavaScript or on the server-side now much easier. You will, however, need to include some extra CSS properties to force the any text-overflow to take place:
p {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Support across other browsers is also very good with support from IE6+, Opera 11 (9-10 using the -o- prefix), Chrome and Safari.