<div class="wrapper">
<h2>Truncating Text with Text-Overflow</h2>
<div class="sf-text-overflow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </div>
<div class="sf-custom-text-overflow">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</div>
<p style="text-align: center; margin-top: 60px;"><a href="https://snippflow.com/snippet/truncating-text-with-text-overflow">See full article</a></p>
<p style="text-align: center;">See more <a href="https://snippflow.com/">CSS Snippets</a></p>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background-color: #f1f4f7; color: #3b495e; font-family: Inter; font-size: 16px; line-height: 1.5; padding: 40px; }
.wrapper { width: 100%; max-width: 900px; margin: 50px auto; padding: 0 30px; text-align: center; }
/* ------------------------- */
/* Snippflow Text Overflow */
/* ------------------------- */
.sf-text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
/* -------------------------------- */
/* Snippflow Custom Text Overflow */
/* -------------------------------- */
.sf-custom-text-overflow {
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: "[...]";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.