<tr >
   <td>7</td>
   <td>抢定中</td>
   <td>未开启</td>
   <td>未设定</td>
   <td id="Multi-word">我们要控制这里，文字太长需要隐藏，然后点击显示全部文字，再次点击又隐藏很多文字。</td>
</tr>
                            
<tr >
   <td>6</td>
   <td>已完成</td>
   <td>已开启</td>
   <td>2019-12-10 10:00:00</td>
   <td id="Multi-word">预定成功！</td>
</tr>

上面是html代码，下面是jquery的代码。

$(document).ready(function () {
            var MaxLength = 20;//先设置一个变量用做第一行最多显示的长度
            var txt = new Array();//定义一个数组
            var texts = $("[id='Multiword']");//获取一下每一个放置文字的div，一组div
            for (var i = 0; i < texts.length; i++) {//写一个循环，循环次数为所有放置文字div的数量
                if (texts.eq(i).text().length > MaxLength) {
                    texts.eq(i).parent().index(i);//给每个索引上的div的父级赋一个index属性，也就是这个段文字在数组内的索引
                    txt[i] = texts.eq(i).text();//将获取的一组文字div按照索引一次将文字放进数组
                    var st = texts.eq(i).text().substr(0, MaxLength) + '……[展开]';//一上来默认第一行显示长度为上面定义的变量长度，后面加...放进变量
                    texts.eq(i).text(st);//再将变量给每组文字的显示
                }
            }

            //每组文字div的点击事件
            $("[id='Multiword']").click(function () {
                if ($(this).outerHeight() > 77) {//如果这个div的高度超过了每行的高度，则执行超出部分隐藏
                    $(this).text($(this).text().substr(0, MaxLength) + '……');//将显示文字重新定义为初始状态
                    //给外面包着的div，也就是父级div写一个动画，高度为目前重新定以后文字高度，400毫秒慢慢缩回，用到animate
                    $(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'yellow' }, 400);
                }
                else {//如果没有超过每行高度，也就是为初始状态的时候，点击需要慢慢下拉打开
                    $(this).text(txt[$(this).parent().index()]);//通过父级的index值找到数组内对应索引的文字，将其显示
                    $(this).css('height', 'auto');//设置这个div的css样式，高度为文字显示高度
                    //因为父级div样式表中设置超出部分隐藏，用animate将高度慢慢下拉至子及div，也就是文字div目前的高度，400毫秒执行完毕
                    $(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'white' }, 400);

                }
            });
        });

文字来源：https://www.cnblogs.com/zyg316/p/5763196.html