Text Overflow Ellipsis for Single and Multiple Lines
# Text Overflow Ellipsis for Single and Multiple Lines
# Single-Line Overflow Ellipsis
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
1
2
3
2
3
# Two-Line (Multi-Line) Overflow Ellipsis
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
1
2
3
4
5
6
2
3
4
5
6
The number of lines displayed is determined by the line-clamp style value.
# JS: Detect Whether an Ellipsis Is Shown
Sometimes we need to know whether the text has overflowed and an ellipsis is shown. This can be done using clientHeight and scrollHeight:
let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
console.log("Overflow detected, ellipsis shown");
} else {
console.log("No overflow");
}
1
2
3
4
5
6
7
2
3
4
5
6
7
This can be used to decide whether to show an expand/collapse button.
# Knowledge Extension
scrollHeight: The height of the element's content, including content not visible due to overflow. Does not include scrollbars, borders, or margins.
clientHeight: The visible height of the element's content, including padding but excluding horizontal scrollbars, borders, and margins.
offsetHeight: The pixel height of the element, including vertical padding and borders, as an integer.
Edit (opens new window)
Last Updated: 2026/03/21, 12:14:36