text-overflow

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box. The ellipsis value causes three periods to be appended to the text.

text-overflow: ellipsis comes into play only when:

1. the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
2. the box has white-space: nowrap or a similar method of constraining the way the text is layed out.
3. (I added a width: 100% for the sake of IE6, in order to prevent it from stretching up the paragraph. The other browsers don't need it.)

Therefore the test element has both white-space: nowrap and overflow: hidden:

p.test {
	border: 1px solid #000000;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

Test paragraph with class="test". It needs quite a lot of text in order to properly test text-overflow.

Test paragraph with class="test opera". It needs quite a lot of text in order to properly test text-overflow.