点击一行字,弹窗显示全部文字

功能:点击文字弹窗显示全部内容
处理建议/措施文字太长怎么办?遇到此类需求可以弹窗显示全部内容,或者点击展开详情,在这里我用弹窗实现此功能。
代码如下:

.inner_deal_measures{
    width: 100%;
    height: 50%;
    position: relative;
}
.measures2 li {
    display: flex;
    width: 100%;
    height: 23%;
    padding: 4px 0 0 0;
}
.inner_deal_measures h5 {
    height: 30px;
    font-size: 16px;
    color: #7FBED3;
    background: linear-gradient(90deg, rgba(65, 160, 190, 0.4) 0%, rgba(57, 151, 182, 0) 100%);
    line-height: 30px;
    border-left: 4px solid #13748F;
    padding-left: 10px;
}
.measures2 li p {
    font-size: 16px;
    padding: 0px 4px 0;
    width: calc(100% - 32px);
    overflow: hidden;
    height: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
}
.inner_deal_measures .dialog2 {
    width: 100%;
    height: 99px;
    border-radius: 8px;
    position: absolute;
    background: linear-gradient(90deg, #0E465A 0%, rgba(48, 79, 98, 0.9) 100%);
    padding: 5px 10px 5px 10px;
    top: 68px;
    z-index: 1;
}
.dialog h1, .dialog2 h1 {
    width: 100%;
    text-align: right;
    line-height: 20px;
}

html代码:

                            <div class="inner_deal_measures">
                                <h5>xxxxxxxxxx措施</h5>
                                <div class="dialog2" style="display: none">
                                    <h1><img src="../../../../../img/close-icon.png" class="close-icon"  width="20px" height="20px"></h1>
                                    <var>1、重启门控器,测试开门,车门指示灯(黄色)是否正常闪亮;2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,故障消失处理完毕;3、若故障仍未消失,更换门控器</var>
                                </div>
                                <ul class="measures2" id="measures2">
                                    <li>
                                        <sapn style="display: inline-block;width: 14px;height: 14px;background: #2E7992;margin-top: 8px;border-radius: 50%;"></sapn>
                                        <p>1、重启门控器,测试开门,车门指示灯(黄色)是否正常闪亮;2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,故障消失处理完毕;3、若故障仍未消失,更换门控器</p>
                                    </li>
                                    <li>
                                        <sapn style="display: inline-block;width: 14px;height: 14px;background: #2E7992;margin-top: 8px;border-radius: 50%;"></sapn>
                                        <p>1、重启门控器,测试开门,车门指示灯(黄色)是否正常闪亮;2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx换门控器</p>
                                    </li>
                                </ul>
                            </div>

js代码:

$(function(){
    $(".measures2 li p").click(function (){
        $(".dialog2").show(500);
    })
    $(".close-icon").click(function (){
        $(".dialog2").hide();
    })
})