EN
CSS - cut with dots (...) overflowing text outside element
15
points
In this article, we're going to have a look at how in a simple way cut overflowing text from an element in pure CSS.
Quick solution:
.element {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Note: JavaScript approach can be found here.
Simple preview:
Practical example with explanation
The simplest way is to use text-overflow style property with ellipsis value.
This approach will be working only if:
- element size will be defined clearly (e.g. with
widthstyle property, when some parent will exceed element size or specific layout will force element to have proper size), - when text wrapping will be disabled (e.g.
white-space: nowrapdoes it), - content overflowing will be disabled (e.g.
overflow: hiddendoes it).
Note: presented in this article text shortcutting does not work if
display: flexstyle property is used with element.To solve the
display: flexproblem, the text should be wrapped with additional element that uses thentext-overflo: ellipsis.Check simple the problem solution here.
Runnable practical example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.text {
padding: 5px;
width: 200px; /* <----------------- required depeding of layout or parent */
border: 1px solid red;
text-overflow: ellipsis; /* <------ required */
white-space: nowrap; /* <---------- required */
overflow: hidden; /* <------------- required */
}
</style>
</head>
<body>
<div class="text">
Very long text here, Very long text here,
Very long text here, Very long text here
</div>
</body>
</html>