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

最新推荐文章于 2023-10-10 10:04:42 发布

syt5324165探索前端的小菇凉~

最新推荐文章于 2023-10-10 10:04:42 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/syt5324165/article/details/125892485

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何处理文字过长的问题，通过点击显示全部内容的弹窗功能来解决。示例代码包括CSS样式和HTML结构，以及JavaScript实现的点击显示和关闭弹窗的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

.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();
    })
})