Многократный многоточие не работает в абсолютном div

Question

В моем div есть наложение другого абсолютно позиционированного div. Однако текст все еще выходит за рамки div.

var mainDiv = ".myclass";
 var mainDivP = ".myclass p";
 $(window).on("load",function(){ multiLine_ellipsis(mainDiv, mainDivP); });

 function multiLine_ellipsis(mainDiv, mainDivP) {
  $(mainDivP).each(function(index) {
    var divh = $(mainDiv).height();
    if ($(this).outerHeight() > divh) {
      var returnText = $(this).text().replace(/\W*\s(\S)*$/, '...');
      console.log(returnText);
      $(this).text(returnText);
    }
  });
}

.myclass {
  color: #FFFFFF;
  font-family: "my-font";
  font-size: 28px;
  padding: 15px;
  height: 100px;
  word-wrap: break-word;
  overflow: hidden;
  position: relative;
}

.myOverlay {
  background-image: url("https://dksa1a9fhenpv.cloudfront.net/website/images/overlay.png");
  position: absolute;
  width: 100%;
  z-index: 1;
  bottom: 0;
  height: 100%;
}
.outerDiv{
  width:231px;
  height:173px;
  position:relative;
}
p{margin:0 0 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerDiv">
  <div class="myOverlay">
    <div class="myclass">
      <p>jadu's best Accommodation/ abcd hddndehd lfjhgs</p>
    </div>
  </div>
</div>

Я должен получить ... в конце утверждения, но я я не понимаю.

Answer 1

Ваш CSS скрывает все остальное, просто измените размер шрифта на 30 пикселей, вы увидите некоторую часть скрытой части.