原生表格文本过长展示问题,参考layui长文本,点击出现文本域

需要引入layui文件

效果

html代码, 记得class="layui-table"; 这要有

    <form class="js-ajax-form" method="post" autocomplete="off">
      

        <table class="layui-table">
            <thead>
            <tr>
                <th>退烧药</th>
            </tr>
            </thead>
            <tbody>
            <foreach name="list" item="vo">
                <tr>
                    
                    <td>
                        <if condition="!empty($vo.drug_names)">
                            <if condition="mb_strlen($vo.drug_names, 'utf-8') gt 10">
                                <span class="layui-inline age-text"
                                      onclick="toggleAgeTextarea(this, '{$vo.drug_names}')">
                                    {$vo.drug_names|mb_substr=0,10}...
                                </span>
                                <textarea class="layui-textarea age-textarea"
                                          style="display: none; width: 200px; height: 40px;"
                                          readonly
                                          onblur="toggleAgeTextarea(this)"></textarea>
                                <else/>
                                <span>{$vo.drug_names}</span>
                            </if>
                        </if>
                    </td>
                     
                </tr>
            </foreach>
            </tbody>
        </table>
    </form>

js 可以弄公共部分每个页面都引入一下

    <!-- 显示隐藏长文本框 -->
    <script>
        // 切换显示文本与文本框
        window.toggleAgeTextarea = function (element, currentValue) {
            var textarea = element.nextElementSibling;

            if (textarea.style.display === 'none') {
                // 显示文本框
                element.style.display = 'none';
                textarea.value = currentValue;
                textarea.style.display = 'block';

                // 定位文本框在点击位置
                var rect = element.getBoundingClientRect();
                textarea.style.position = 'absolute';
                textarea.style.left = rect.left + 'px';
                textarea.style.top = rect.top + 'px';
                textarea.style.zIndex = '1000';
                textarea.style.resize = 'both';
                textarea.style.overflow = 'auto';
                textarea.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
                textarea.style.minHeight = '70px';
                textarea.style.minWidth = '200px';

                textarea.focus();
            } else {
                // 隐藏文本框，显示文本
                var updatedValue = textarea.value;
                textarea.style.display = 'none';
                element.innerText = updatedValue.length > 10 ? updatedValue.substr(0, 10) + "..." : updatedValue;
                element.style.display = 'inline';
            }
        };

        // 监听文本框失去焦点
        document.addEventListener('blur', function (event) {
            var target = event.target;
            if (target.classList.contains('age-textarea')) {
                var textarea = target;
                var spanElement = textarea.previousElementSibling;

                // 隐藏文本框并更新显示文本
                textarea.style.display = 'none';
                var updatedValue = textarea.value;
                spanElement.innerText = updatedValue.length > 10 ? updatedValue.substr(0, 10) + "..." : updatedValue;
                spanElement.style.display = 'inline';
            }
        }, true);
    </script>