javascript — скрыть и показать некоторые div в зависимости от переполнения

У меня есть динамическая таблица, в которой я скрываюсь после отображения первых нескольких слов из большого текста, если пользователь хочет прочитать полные данные, которые он использует, чтобы нажать смотреть больше Кнопка, чтобы прочитать полные данные, она работает нормально, но проблема в том, как показать вид только для тех строк, в которых был переполнен текст.

Решение php

просто в php мы можем использовать strlen() и может дать условие, как

if(strlen($data) > 100 ){
make visible
}

но не могу предположить, сколько символов точно вписывается в div, потому что пользователи могут использовать ввод, так что счетчик текста может меняться, поэтому он не будет работать.

Решение JavaScript

function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}

здесь я могу найти, какой div переполнен, но так как таблица была динамической, я не знаю точные идентификаторы, я попробовал что-то вроде

<tr>
<td>
<div id="hidden_field_{$row['his_id']}">{$row['his_data']}</div>
</td>
<td>
<br/>
<?php
$check_overflow=echo "<script>checkOverflow(document.getElementById('hidden_field_".{$row['his_id']}."'));</script>";
if($check_overflow=="true"){
?>
<a id="get_view_more_{$row['his_id']}" onclick="view_more({$row['his_id'];});">View More</a>
<?php } ?>
</td>
</tr>

эта функция отлично работает вне php внизу страницы

<script>
alert(checkOverflow(document.getElementById('hidden_field_1')));</script>