<h1>三点リーダー</h1>
<div class="box">
  <h2>処理したテキスト</h2>
  <p class="ellipsis">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <h2>処理していないテキスト</h2>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
.box {
  width: 300px;
  
  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.