<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: "[...]";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.