<h1>Abbreviated text</h1>
<div class="grid">
   <div class="grid-inner">
       <section>
        <h2>Title1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </section>

       <section>
        <h2>Title2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
        </section>

       <section>
        <h2>Title3</h2>
        <p>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, consectetur adipisicing elit, se</p>
      </section>
  </div>
</div>
body{
   padding: 50px 0px;
}

h1{
  text-align: center;
  font-weight: 700;
  font-size:40px;
  font-family: 'Comfortaa', cursive;
}

h2{
  font-size:25px;
  font-weight: bold;
  font-family: 'Comfortaa', cursive;
}

.grid{
  display: block;
  width: 600px;
  margin: auto;
  overflow: hidden;
  letter-spacing: 0;
  font-size:0px;
  padding: 0px;
}

.grid-inner{
  width: 100%;
  display: block;
  letter-spacing: 0;
  padding: 0;
  font-size: 0;
  margin: 0px -20px;
}

section{
  width: 33.3333%;
  display: inline-block;
  margin: 0px;
  padding: 0px 20px;
  box-sizing: border-box;
}

p{
  line-height:2;
  font-size:14px;
  height: 14*2*5+px;  //文字サイズ*行間*表示したい行数=全体の高さ
  overflow: hidden;
  position: relative;
  word-break: break-all;
  text-align:justify;
  &:before,&:after{
    position:absolute;
  }
  &:before{
    content:'...'; //三点リーダー
    background: #888; //最後の文字を隠すための背景
    width: 1em;
    font-size:14px;
    right: 0px;
    text-aline:center;
    top:14*2*(5-1)+px; //文字サイズ*行間*表示したい行数-1 *開始位置が一行分多いため
  }
  &:after{
    content: "";
    height: 100%;
    width: 100%;
    background: #ccc; //表示させたい文字の行数に到達しなかった時に「…」を隠すための背景
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.