epllicis

by uto usui

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Dancing+Script:400,700"></script>
<h1 class="h1">line epllicis</h1>

<div class="wrap">
	<div class="inner">
    <div class="text">
      <h2>nomal <br>ー</h2>
      <p class="nomal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas error qui ipsum assumenda. Veritatis doloribus provident perspiciatis minima tempora voluptatem, nemo rerum repudiandae quibusdam, dolorem. Nam, consectetur iusto iste!</p>
    </div>
     <div class="text">
      <h2>1 row <br>ー</h2>
      <p class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas error qui ipsum assumenda. Veritatis doloribus provident perspiciatis minima tempora voluptatem, nemo rerum repudiandae quibusdam, dolorem. Nam, consectetur iusto iste!</p>
     </div>
     <div class="text">
      <h2>2 rows <br>ー</h2>
      <p class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas error qui ipsum assumenda. Veritatis doloribus provident perspiciatis minima tempora voluptatem, nemo rerum repudiandae quibusdam, dolorem. Nam, consectetur iusto iste!</p>
     </div>
     <div class="text">
      <h2>4 rows <br>ー</h2>
      <p class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas error qui ipsum assumenda. Veritatis doloribus provident perspiciatis minima tempora voluptatem, nemo rerum repudiandae quibusdam, dolorem. Nam, consectetur iusto iste!</p>
     </div>
	</div>
</div>

SCSS

body {
	width: 100%;
  min-height: 100vh;
	padding-bottom: 150px;
  background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%);
  font-feature-settings: "pwid";
}

p {
  margin-bottom: 0;
}

.h1 {
  margin: 1.4em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}


.inner {
	min-width: 300px;
}

.text {
  margin: 2em;
  padding: 2em;
  max-width: 640px;
  font-size: 16px;
  text-align: justify;
  color: rgba(black,.65);
  font-weight: 600;
  border: 4px solid currentcolor;
  background-color: #ffffff;
}

@mixin lineClip($line-number: 2, $line-height: 1, $right-space: 1em, $background-color: #ffffff) {
  position: relative;
  overflow: hidden;
  height: calc(#{$line-number + em } * #{$line-height});
  padding-right: $right-space;
  line-height: $line-height;
  background-color: $background-color;
  &:before {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    width: $right-space;
  }
  &:after {
    content: "";
    position: relative;
    right: calc(#{$right-space} * -1);
    float: right;
    width: $right-space;
    height: 100%;
    margin-left:calc(#{$right-space} * -1);
    background-color: $background-color;
  }
}

.one {
  // lineClip(row, line-height, right-space, background-color(same parent));
  @include lineClip(1);
}

.two {
  @include lineClip(2, 2);
}

.four {
  @include lineClip(4, 2, 2em, #ffffff);
}

JavaScript

// webfont loading
 ///////////////////////////////

WebFontConfig = {
    google: { families: [ 'Dancing+Script:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();