Text-overflow

How to overflow text when it does not fit into the containing element.

Syntax
      text-overflow: clip | ellipsis | string ;

clip - Clip the text.
ellipsis - Show an ellipsis … to represent the clipped text.
"string" - Display string instead of the clipped text.

To use text-overflow within a table cell with IE, you may need to set white-space: nowrap; along with table-layout: fixed; on the table itself.

Examples:
h1 { text-overflow: auto; }
.ss64class { text-overflow: hidden; }

#SS64id { text-overflow: scroll; }

Try it:

This long sentence will be truncated if we limit it to being just 300 px wide with no wrapping onto multiple lines. Of course a simpler alternative would be just writing a shorter sentence in the first place.

(CSS 3) Browser Support: All major browsers, see caniuse.com

“Short cuts make long delays” ~ J.R.R. Tolkien

Related:

overflow - What happens if content overflows an element's box.
overflow-x - Whether to clip the left/right edges of overflowing content.
overflow-y Whether to clip the top/bottom edges of overflowing content.
table-layout - Layout algorithm to be used for a table
white-space - How white-space inside an element is handled.
text-align - Horizontal alignment of text.


© Copyright SS64.com 1999-2014
Some rights reserved