8.1 The text-overflow Property
Text wrapping and controlling its display are crucial aspects of web design, especially when dealing with long text lines or containers with limited size. The text-overflow, white-space and word-wrap (now known as overflow-wrap) properties let you control how text behaves in such scenarios.
The text-overflow property manages how text that extends beyond the boundaries of its container is displayed. It is used in combination with the white-space and overflow properties to create text clipping and ellipsis effects.
Values:
clip: clips the text that extends beyond the container boundariesellipsis: adds an ellipsis (...) at the end of clipped text
Example Usage:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">This text will be clipped at the container's border.</div>
<div class="container ellipsis">This text will be clipped and replaced with an ellipsis.</div>
</body>
8.2 The white-space Property
The white-space property controls the handling of whitespace and text wrapping. It allows you to specify how spaces, tabs, and line breaks are processed in the text.
Values:
normal: spaces and line breaks are handled normally (default)nowrap: text is displayed on a single line without wrappingpre: spaces and line breaks are preserved, like in an HTML<pre>tagpre-wrap: spaces and line breaks are preserved, but text may wrap if necessarypre-line: line breaks are preserved, but spaces are handled as usualbreak-spaces: spaces and line breaks are preserved, and long spaces may cause text to wrap
Example Usage:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">This text will wrap to the next line if there isn't enough space.</div>
<div class="nowrap">This text will not wrap to the next line and will display on a single line.</div>
<div class="pre">
This text will preserve
all spaces and line breaks.
</div>
<div class="pre-wrap">
This text will wrap to the next line but will also preserve
all spaces and line breaks.
</div>
</body>
8.3 The overflow-wrap Property
The overflow-wrap property (formerly known as word-wrap) controls the breaking of words that extend beyond the container boundaries. It helps prevent container overflow by long words that can't be naturally broken up.
Values
normal: word breaks occur according to standard rulesbreak-word: word breaks occur even if it means splitting a word onto a new line
Example Usage:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">This text will wrap to the next line if there isn't enough space.</div>
<div class="container break-word">ThislongwordWILLbreakontoanewlineifthereisn'tenoughspace.</div>
</body>
Code Explanation:
overflow-wrap: normal;: word breaks occur according to standard rules, no splitting of wordsoverflow-wrap: break-word;: long words will be split and wrapped onto the next line as necessary
8.4 Combining Properties
The text-overflow, white-space, and word-wrap properties are often used together to achieve the desired text display effect in containers with limited size.
Example Usage:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">This text will be clipped and replaced with an ellipsis if there's not enough space in the container.</div>
</body>
Code Explanation:
white-space: nowrap;: text is displayed on a single line, no wrappingoverflow: hidden;: hides the text that extends beyond the container boundariestext-overflow: ellipsis;: adds an ellipsis at the end of clipped textoverflow-wrap: break-word;: breaks long words if there isn't enough space
GO TO FULL VERSION