CSS text-overflow: ellipsis；不生效的问题

最新推荐文章于 2024-04-26 09:18:36 发布

Lan.W

最新推荐文章于 2024-04-26 09:18:36 发布

阅读量538

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/LlanyW/article/details/129299577

版权

文章讲述了在CSS中如何使用text-overflow:ellipsis，white-space:nowrap和overflow:hidden来处理文本溢出，并在鼠标悬停时显示完整内容。问题出在.p标签内嵌套在.box4中，移除.p标签后达到预期效果。

摘要由CSDN通过智能技术生成

添加了：ellipsis

根据要求，width, text-overflow,white-space,overflow这几个字段都配置了，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            text-align: justify;
            text-indent: 2em; /*2个字的缩进*/
        }

        .box4 {
            /*height: 100px;*/
            width: 100px;
            background-color: darkgray;

            /*    溢出显示：...*/
            text-overflow: ellipsis;
            /*禁止换行*/
            white-space: nowrap;
            /*禁止文字溢出*/
            overflow: hidden;

        }

        .box4:hover {
            text-overflow: inherit;
            overflow: visible;
        }
    </style>
</head>
<body>
   
<div class="box4">
    <p> No I ain't got cash
        Let's dance in style, let's dance for a while

        　　Heaven can wait, we're only watching the skies

        　　Hoping for the best but expecting the worst

        　　Are you gonna drop the bomb or not?</p>
</div>
</body>
</html>

最后检查发现是.box4里还有一层p标签，把p标签去掉就可以了。