Edit in JSFiddle

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);
}