一最安 2021-09-14 18:09 采纳率: 84.4%
浏览 97
已结题

想要实现文本超出div宽度时文本隐藏,使用省略号代替,点击即可展开,请问?

img


如图所示,在便签图片里的文字溢出

img


已经设置overflow和 text-overflow 可是失效,望赐教


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>祝福墙</title>
</head>
<style>
    * {
        padding: 0;
        margin:0;
    }
    body {
        width:100%;
        height:100%;
        background-repeat: no-repeat;
        background:url("./墙.jpg");
    }

    .note {
        position: absolute;
        background: url("./纸2.png") no-repeat;
        background-size:100% 100%;
        width: 50vw;
        height: 30vw;
    }

    span {
        display: block;
    }

    .noteHeader {
        padding-right: 7vw;
        float: right;
        padding-top: 6vw;
    }


    .noteHeader s {
        text-decoration: none;
        position: absolute;

        text-align: center;

        cursor: pointer;
    }

    div.noteContent {

        position: relative;
        top: 8vw;
        left: 12vw;
        font-size: 2.5vw;

        /* padding-bottom: 102vw; */
        text-align: center;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-overflow: ellipsis;


    }





    div.noteName{
        color: #C0F;
        position: relative;
        float: right;
        top: 21vw;
        font-size: 1.5vw;
    }


</style>
<body>
    <div class="content">

    </div>


<script>
    //模拟数据库,获取信息
    var messages = [
        // {"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"},
        // {"id": 2, "name": "haha", "content": "今天天气不错,风和日丽的", "time": "2016-02-18 12:40:00"},
        // {"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
        // {"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
        // {"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
        // {"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人,真是躲得过初一,躲不过十五。", "time": "2016-02-22 01:30:00"},
        {
            "id": 7,
            "name": "没猴哥,不春晚",
            "content": "班主任:“小明,你都十二岁了,还是三年级,不觉得羞愧吗”?。小明:“一点也不觉得,老师你都四十多岁了,不也是年年在三年级混日子吗?羞愧的应该是你”。老师:111111111111111111111",
            "time": "2016-02-22 01:30:00"
        },
        // {"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人,月亮有什么好看的,全是坑,还是对面那哥们好看,", "time": "2016-02-22 01:30:00"},
        // {"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看!!?答:朋友圈。。。", "time": "2016-02-22 02:30:00"}
    ];
    var content = document.getElementsByClassName("content")[0];

    for (var i = 0; i < messages.length; i++) {

        content.innerHTML+=



            '<div class="note">' +


                '<div class="noteHeader">' +
                    '<s><img src="关闭32.svg" alt="关闭" width="20vw" height="20vw"></s>' +
                    // '<span>' + messages[i].time + '</span>' +

                '</div>' +

                '<div class="noteContent">' + messages[i].content + '</div>' +

                '<div class="noteName">' +messages[i].name+'</div>' +


        '</div>';
    }
    var divEles = content.children;
    var zIndexValue = 0;
    for (var i = 0; i < divEles.length; i++) {
        divEles[i].style.top = randomTop() + "vw";
        divEles[i].style.left = randomLeft() + "vw";
        divEles[i].onclick = function () {
            zIndexValue++;
            this.style.zIndex = zIndexValue;
        }
        var closeEle = divEles[i].getElementsByTagName("s")[0];
        closeEle.onclick = function () {
            content.removeChild(this.parentNode.parentNode);
        }
    }

    function randomTop() {
        return parseInt(Math.random() * (150 - 10)+10);
    }

    function randomLeft() {
        return parseInt(Math.random() * (+50 - +5) + +5);
        // return parseInt(Math.random() * (96 - 40));
    }
</script>
</body>
</html>

展开全部

  • 写回答

4条回答 默认 最新

  • 崽崽的谷雨 2021-09-15 02:33
    关注
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>祝福墙</title>
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    
        body {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background: url("./墙.jpg");
        }
    
        .note {
            position: absolute;
            background: url("./纸2.png") no-repeat;
            background-size: 100% 100%;
            width: 50vw;
            height: 30vw;
        }
    
        span {
            display: block;
        }
    
        .noteHeader {
            padding-right: 7vw;
            float: right;
            padding-top: 6vw;
        }
    
        .noteHeader s {
            text-decoration: none;
            position: absolute;
            text-align: center;
            cursor: pointer;
        }
    
        .noteContent {
            position: relative;
            top: 8vw;
            left: 12vw;
            font-size: 2.5vw;
            text-align: center;
            background: red;
            display: -webkit-box; /*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/
            word-break: break-all;
            text-overflow: ellipsis; /*可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/
            overflow: hidden;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
    
    
        div.noteName {
            color: #C0F;
            position: relative;
            float: right;
            top: 21vw;
            font-size: 1.5vw;
        }
    </style>
    
    <body>
        <div class="content">
        </div>
    
        <script>
            //模拟数据库,获取信息
            var messages = [
                // {"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"},
                // {"id": 2, "name": "haha", "content": "今天天气不错,风和日丽的", "time": "2016-02-18 12:40:00"},
                // {"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
                // {"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
                // {"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
                // {"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人,真是躲得过初一,躲不过十五。", "time": "2016-02-22 01:30:00"},
                {
                    "id": 7,
                    "name": "没猴哥,不春晚",
                    "content": "班主任:“小明,你都十二岁了,还是三年级,不觉得羞愧吗”?。小明:“一点也不觉得,老师你都四十多岁了,不也是年年在三年级混日子吗?羞愧的应该是你”。老师:11111111111111111111199999999999999999999999999999999999999",
                    "time": "2016-02-22 01:30:00"
                },
                // {"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人,月亮有什么好看的,全是坑,还是对面那哥们好看,", "time": "2016-02-22 01:30:00"},
                // {"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看!!?答:朋友圈。。。", "time": "2016-02-22 02:30:00"}
            ];
            var content = document.getElementsByClassName("content")[0];
            for (var i = 0; i < messages.length; i++) {
                content.innerHTML +=
    
                    '<div class="note">' +
    
                    '<div class="noteHeader">' +
                    '<s><img src="关闭32.svg" alt="关闭" width="20vw" height="20vw"></s>' +
                    // '<span>' + messages[i].time + '</span>' +
                    '</div>' +
                    '<div class="noteContent">' + messages[i].content + '</div>' +
                    '<div class="noteName">' + messages[i].name + '</div>' +
    
                    '</div>';
            }
            var divEles = content.children;
            var zIndexValue = 0;
            for (var i = 0; i < divEles.length; i++) {
                divEles[i].style.top = randomTop() + "vw";
                divEles[i].style.left = randomLeft() + "vw";
                divEles[i].onclick = function () {
                    zIndexValue++;
                    this.style.zIndex = zIndexValue;
                }
                var closeEle = divEles[i].getElementsByTagName("s")[0];
                closeEle.onclick = function () {
                    content.removeChild(this.parentNode.parentNode);
                }
            }
            function randomTop() {
                return parseInt(Math.random() * (150 - 10) + 10);
            }
            function randomLeft() {
                return parseInt(Math.random() * (+50 - +5) + +5);
                // return parseInt(Math.random() * (96 - 40));
            }
        </script>
    </body>
    
    </html>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 9月22日
  • 已采纳回答 9月15日
  • 创建了问题 9月14日

悬赏问题

  • ¥15 mybatis自定义sql VO赋值不上去
  • ¥15 MC9S12XS128单片机开发板实验
  • ¥15 WSL上下载的joern在windows怎么用?
  • ¥15 jetson nano4GB
  • ¥15 电脑回复出厂设置,重装过程报错提示,求解决方案Windows 无法分析或处理无人参与应答文件 [C:\WINDOWS\Panther\unattend.xml,如何解决?
  • ¥15 进入lighttools中的UDOP编辑器的方法
  • ¥15 求Gen6d训练数据集
  • ¥20 liunx中winscp中可以登入ftp,但是不能登入sftp,如何解决
  • ¥15 lighttools的光学属性自定义的用法流程
  • ¥15 uni-app动态修改推荐页标题时报错
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部