Как проверить, видна ли конкретная часть текста (строки) после рендеринга HTML / Angular?

Question

Я занимаюсь разработкой веб-сайта, который использует несколько разборных частей, и если текст действительно большой, есть ссылка «читать дальше», которая позволяет пользователю читать весь контент в модальном диалоговом окне (начальной загрузке).Я думаю, что я хочу показать ссылку «читать дальше», только если текст отображается не полностью.Однако элемент, который отображает текст, уже показан.Можно ли как-то проверить, полностью ли виден текст?

Пример изображения

Вот фрагмент кода HTML / Angular для него:

<div class="collapse show" id="noticia{{i}}">
       <div class="sidebar-box">
         <p class="text-justify" [innerHTML]="noticia.noticia"></p>
         <p class="read-more"><a href="#" class="button"></a></p>
       </div>
       
       <!-- This I want to render ONLY IF noticia.noticia is NOT fully visible -->
       <p style="margin-left:5px;"><a (click)="noticiaSelecionada = noticia; modalTextoNoticia.show()" href="javascript:void(0)" class="button">Ler tudo...</a></p>
      
   <!-- IRRELEVANT CODE COMES HERE -->

</div>

Это фрагменты CSS этого примера:

.sidebar-box {
  margin: 5px 5px 0 5px;
  max-height: 600px;
  position: relative;
  overflow: hidden;
}

.sidebar-box .read-more { 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  text-align: center; 
  margin: 0; padding: 5px 0; 
  background-image: linear-gradient(to bottom, transparent, #eee);
}