CSS控制文本长度超出用省略号(单行/多行)-补充鼠标移上去显示全部内容

2021-10-09 1052点热度 0人点赞 0条评论

之前的文章介绍 [CSS]控制文本长度多出来用省略号(单行或者多行适用),不过可以做的更完善一些,就是如果用户把鼠标一到文字上,需要显示全部内容,可以在标签上加title='全部内容'。经过测试div span等等都是可以加title的

示例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <style>
        .sinle-line-ellipsis {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            width: 140px;
            display: block;
        }
    </style>

    <script type="text/javascript">

    </script>
</head>

<body>

    <div class="sinle-line-ellipsis" title="完整内容完整内容完整内容完整内容">内容内容内容内容内容内容内容内容内容</div>

</body>

</html>

效果如图:

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论