<div class="text-wrapper">
  <p class="text">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事</p>
</div>
.text {
  background-color: inherit;
  max-height: 1.75em * 3;
  line-height: 1.75;
  overflow: hidden;
  position: relative;

  &::before,
  &::after {
    background: inherit;
    position: absolute;
  }

  &::before {
    bottom: 0;
    content: '･･･';
    right: 0;
  }

  &::after {
    content: '';
    height: 100%;
    width: 100%;
  }
}

/**
 * リセットCSS&レイアウト用CSS
 * 本件とは関係ありません
**/

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background: #a7a7a7;
  color: #3a3a3a;
  font-family: 'Helvetica Neue', 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  padding: 5%;
}

.text-wrapper {
  background-color: #f7f7f7;
  max-width: 960px;
  padding: 2em 2.5em;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.