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 can set white-space: nowrap; along with table-layout: fixed; on the table itself.
Examples:
h1 { text-overflow: auto; }
.emw3class { text-overflow: hidden; }
#emw3id { 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.
“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.