CSS can truncate single-line and multi-line Text using the property text-overflow
1text-overflow: clip|string|ellipsis|initial|inherit;
The [
"text-overflow"
] property determines how to handle inline text that overflows its block container by specifying how overflowed text is signaled to the user.
That is, it allows you to specify what to display at the points where the text overflows the container.
Text can overflow a block container only in its inline progression direction. Text may overflow when it is prevented from wrapping (e.g. due to [
"white-space: nowrap"
]) or a single word is too long to fit.
The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ([
"…"
]), or display a custom string.
For example:
[
"clip"
] value
Text is clipped and cannot be seen. This is the default value.
1.elem { 2 text-overflow: clip; 3 /*^^^^^^^^^^^^^^^^*/ 4 white-space: nowrap; 5 /*^^^^^^^^^^^^^^^^*/ 6 background: white; 7 border: 1px solid black; 8 max-width: 450px; 9 padding: 0.5em 1em; 10}
1# ----------------------------------- 2# | This is some long sentence that ca|nnot wrap, so it overflows the element. 3# -----------------------------------
But, as you can see, the text overflows its container but does not get clipped out or hidden. So, without any additional styles, the [
"text-overflow"
] property has no effect on the element.
In order for [
"text-overflow"
] to work, you need to clip the text that overflows its container. This can be done by setting the [
"overflow"
] property of the element to hidden, or any value other than visible. Using [
"overflow: hidden"
], the above element becomes:
1.elem { 2 text-overflow: white; 3 background: white; 4 border: 1px solid black; 5 overflow: hidden; 6 /*^^^^^^^^^^^^^*/ 7 white-space: nowrap; 8 max-width: 450px; 9 padding: 0.5em 1em; 10}
1# ----------------------------------- 2# | This is some long sentence that ca| 3# -----------------------------------
[
"ellipsis"
] value
Text is clipped and the clipped text is represented as [
"..."
].
1.elem { 2 text-overflow: ellipsis; 3 /* ^^^^^^*/ 4 white-space: nowrap; 5 overflow: hidden; 6 background: white; 7 border: 1px solid black; 8 max-width: 450px; 9 padding: 0.5em 1em; 10}
1# ----------------------------------- 2# | This is some long sentence that...| 3# -----------------------------------
[
"string"
] value
Note: It's experimental, so you could expect the behavior to change in the future.
The clipped text is represented to the user using a string of the coder's choice. This option is only visible in the Firefox browser.
1.elem { 2 text-overflow: '>>>'; 3 /* ^^^^*/ 4 white-space: nowrap; 5 overflow: hidden; 6 background: white; 7 border: 1px solid black; 8 max-width: 450px; 9 padding: 0.5em 1em; 10}
1# ----------------------------------- 2# | This is some long sentence that>>>| 3# -----------------------------------
Multi line truncate
Multi-line is not much more difficult, it is a combination of 3 properties. The solution is a proprietary CSS property that will limit the text of a block container to a given number of lines when used in combination with [
"display: -webkit-box"
] and [
"-webkit-box-orient: vertical"
];
Even though it is proprietary is has 96% support in browsers according to Can I use.
1.elem { 2 text-overflow: ellipsis; 3 white-space: nowrap; 4 overflow: hidden; 5 display: -webkit-box; 6 /*^^^^^^^^^^^^^^^^^*/ 7 -webkit-line-clamp: 2; 8 /*^^^^^^^^^^^^^^^^^^*/ 9 -webkit-box-orient: vertical; 10 /*^^^^^^^^^^^^^^^^^^^^^^^^^*/ 11 background: white; 12 border: 1px solid black; 13 max-width: 450px; 14 padding: 0.5em 1em; 15}
Notes
The side of the line that the ellipsis is placed depends on the direction of the block. E.g. an overflow hidden right-to-left ([
"direction:rtl"
]) block clips inline content on the left side, thus would place a text-overflow ellipsis on the left to represent that clipped content.