text-overflow, white-space, word-break
These properties control how text behaves when it overflows or needs to wrap. text-overflow adds ellipsis, white-space controls wrapping, word-break controls line breaks.
Text Overflow
CSS
/* Text ellipsis (truncation) */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Displays as: Text that is too lon... */
}
/* Multiple line truncation */
.clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
/* Shows 3 lines max, then ellipsis */
}White Space Handling
Value | Wraps | Spaces | Use |
|---|---|---|---|
normal | Yes | Collapsed | Default text |
nowrap | No | Collapsed | Single line |
pre | No | Preserved | Code formatting |
pre-wrap | Yes | Preserved | Formatted text |
CSS
/* White space values */
.normal {
white-space: normal;
/* Wraps, multiple spaces collapse */
}
.nowrap {
white-space: nowrap;
/* Doesn't wrap, forces single line */
}
.pre {
white-space: pre;
/* Preserves spaces and newlines */
font-family: monospace;
}
.pre-wrap {
white-space: pre-wrap;
/* Preserves formatting, wraps text */
}Word Break
CSS
/* Word breaking */
.break-word {
word-break: break-word;
/* Breaks long words if needed */
}
.break-all {
word-break: break-all;
/* Breaks at any character if needed */
}
.normal {
word-break: normal;
/* Default, respects word boundaries */
}
/* Word wrap (overflow-wrap) */
.overflow-wrap {
overflow-wrap: break-word;
/* Breaks long words to fit container */
}Note
text-overflow adds ellipsis. white-space controls wrapping. word-break controls line breaks. Combine for text truncation effects.
Next
Multi-column layout: [Multi-Column Layout (columns)](/css/columns).