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

之前的文章介绍 [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>

效果如图：

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

文章评论