If you want to apply ellipsis (...) to a single line of text, CSS makes that somewhat easy with the text-overflow property. It's still a bit tricky (due to all the requirements – see below), but text-overflow makes it possible and reliable.
If, however, you want to use ellipsis on multiline text – as would be the case here – then don't expect to have any fun. CSS has no standard method for doing this, and the workarounds are hit and miss.
Ellipsis for Single Line Text
With text-overflow, ellipsis can be applied to a single line of text. The following CSS requirements must be met:
- must have a
width, max-width or flex-basis
- must have
white-space: nowrap
- must have
overflow with value other than visible
- must be
display: block or inline-block
(or the functional equivalent, such as a flex item).
So this will work:
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ffffd;
margin: 0;
}
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
jsFiddle version
BUT, try removing the width, or letting the overflow default to visible, or removing white-space: nowrap, or using something other than a block container element, AND, ellipsis fails miserably.
One big takeaway here: text-overflow: ellipsis has no effect on multiline text. (The white-space: nowrap requirement alone eliminates that possibility.)
p {
width: 200px;
/* white-space: nowrap; */
height: 90px; /* new */
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ffffd;
margin: 0;
}
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
jsFiddle version
Ellipsis for Multiline Text
Because CSS has no property for ellipsis on multiline text, various workarounds have been created. Several of these methods can be found here:
- jQuery dotdotdot...
- Line Clampin’ (Truncating Multiple Line Text)
- CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
- A pure CSS solution for multiline text truncation
The Mobify link above was removed and now references an archive.org copy, but appears to be implemented in this codepen.
