Ellipsis

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<p class="ellipsis-text">
  <span class="text">
    This is a very very long text that needs to be elided come one lets make this text even longer and see if this works and more or not lets seem how this works help me why this is not working what the hell why is this not working let me know d af  afgadg fka ke pafafk serg etsseeandhowi nae kladf knliu kld
    <span class="ellipsis"></span>
  </span>
</p>
</html>

// Code goes here

/* Styles go here */

.ellipsis-text {
  border: 1px solid black;
  line-height: 15px;
  max-height:30px;
  font-size: 15px;
  overflow: hidden;
  position: relative;
  background: white;
}

.text::after {
  width:100%;
  height:100%;
  position:absolute;
  content:'';
  background:white;
}

.ellipsis::before {
  content:'...';
  position: absolute;
  right:0;
  bottom:0;
}