text-overflow

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box.

text-overflow 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 laid out. (Without this, the text would wrap to the next line)

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

p.test {
	border: 1px solid #000000;
	white-space: nowrap;
	overflow: hidden;
}

The text-overflow value is added to these styles.

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

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

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

overflow: auto

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

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