如何判断ellispsis生效了

最新推荐文章于 2024-01-25 16:13:37 发布

GAMELOFT9

最新推荐文章于 2024-01-25 16:13:37 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签：文本省略 ellispis overflow

本文链接：https://blog.csdn.net/GAMEloft9/article/details/98757613

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

主要内容

要让文本超过长度后，截取显示并附上省略号，可以通过如下的css代码实现：

 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 width:100px;

有时候，我们需要根据文本是否省略做一些别的事情，例如显示一个展开按钮。现在是CSS控制文本省略了，如何检测到呢？
废话不多说，直接通过文本元素的clientWidth和scrollWidth来检测。
clientWidth是元素的可视宽度。scrollWidth是元素的滚动宽度，包括了滑动条边框和被隐藏的内容宽度。因此可以直接判断clientWidth和scrollWidth的大小，来确定是否文本被省略了。代码如下：

 /**
     * 文字是否被省略
     * */
    function isElipsis(id) {
        var clientWidth = document.getElementById(id).clientWidth;
        var scrollWidth = document.getElementById(id).scrollWidth;

        return (clientWidth < scrollWidth); // 说明文字被省略了
    }

测试截图：

1、内容未超出长度

在这里插入图片描述

2、内容超出长度

在这里插入图片描述

测试代码(可直接浏览器打开)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文字省略</title>
    <style>
        .container {
        }

        .text {
            display: block;

            overflow: hidden;
            white-space:nowrap;
            text-overflow:ellipsis;

            border:1px solid #cccccc;
            width: 200px;
        }

        .collapse {
            display: block;
            background-color: #00ac3b;
            flex: 1;
        }

        .res_container{
            border:1px solid #cccccc;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>
<div>
    <input type="text" id="input_content" vlaue="" placeholder="输入内容"/>
    <button id="set">设置文本</button>
    <button id="check">检查是否省略显</button>
</div>
<br/>
<div class="container">
    <p>内容:<span id="content" class="text">这个是商户名称我觉得比较长了应该可以了</span></p>
</div>
<br/>
<div class="res_container">
    <p>检查结果：<span id="res">未省略</span></p>
</div>
<script>
    $(function () {
        // 设置文本内容
        $("#set").click(function () {
            $("#content").text($("#input_content").val());
        });

        // 检查是否省略
        $("#check").click(function () {
            if(isEllipsis("content")){
               $("#res").text("已省略")
            }
        });

        // 检查是否省略
        function isEllipsis(id) {
            var clientWidth = document.getElementById(id).clientWidth;
            var scrollWidth = document.getElementById(id).scrollWidth;
            return clientWidth < scrollWidth;
        }
    });
</script>
</body>
</html>

GAMELOFT9

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何判断ellispsis生效了

主要内容要让文本超过长度后，截取显示并附上省略号，可以通过如下的css代码实现： text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:100px;有时候，我们需要根据文本是否省略做一些别的事情，例如显示一个展开按钮。现在是CSS控制文本省略了，如何检测到呢？废话不多说，直接通过文本元素的clie...
复制链接

扫一扫