hide long text only css

hide-long-text-only-css.markdown

hide long text only css

A Pen by takanorioki on CodePen.

License.

index.html

<p class="textbox">ここはその間もうある指導めといったのの時を引きんない。いくらでも毎日に詐欺顔は何だかその思索ででしょほどをしているでしをは注意至るましませて、たったにはやまたでましで。一部分をつかあるものはもし将来を単にないうた。もし大森さんに立証事業ますます教育をしない世の中こうしたdo私か関係のという肝学問たですでたから、同じ当時はここか教場飯を描いと、岡田さんの訳がつまりのそれからとやかくお養成と見えてそれ地位より肝用意でさようにどうしてもご煩悶で考えんますながら、すでにすでに発展を載せでがいたのが突っついまします。それでまたご数のなっのもはっきり立派と畳んですて、この世の中をもすまなけれてという目的に飛びて来あっまし。</p>

<p class="textbox">ここはその間もうある指導めといったのの時を引きんない。いくらでも毎日に詐欺顔は何だかその思索ででしょほどをしているでしをは注意至るましませて、たったにはやまたでましで。一部分をつかあるものはもし将来を単にないうた。もし大森さんに立証事業ますます教育をしない世の中こうしたdo私か関係のという肝学問たですでたから、同じ当時はここか教場飯を描いと、岡田さんの訳がつまりのそれからとやかくお養成と見えてそれ地位より肝用意でさようにどうしてもご煩悶で考えんますながら、すでにすでに発展を載せでがいたのが突っついまします。それでまたご数のなっのもはっきり立派と畳んですて、この世の中をもすまなけれてという目的に飛びて来あっまし。</p>

style.css

.textbox {
  position: relative;
  width: 600px;
  height: 100px;
  margin: 40px auto;
  overflow: hidden;
  line-height: 1.3;
}

.textbox:before, .textbox:after {
  position: absolute;
  background: #fff;
}

.textbox:before {
  content: "･･･";
  bottom: 0;
  right: 0;
}

.textbox:after {
  content: "";
  width: 100%;
  height: 100%;
}