jquery超出隐藏

基础概念

jQuery 超出隐藏是一种常见的前端技术，用于处理元素内容超出其容器时的显示问题。通过这种方式，可以确保页面布局的美观性和内容的可读性。

类型

文本溢出隐藏：当文本内容超出容器宽度时，使用省略号或其他方式隐藏多余部分。
图片溢出隐藏：当图片尺寸超出容器大小时，可以裁剪或缩放图片以适应容器。

应用场景

新闻列表：在新闻列表中，标题可能很长，需要隐藏超出部分并显示省略号。
商品描述：在商品详情页，描述可能很长，需要隐藏超出部分以保持页面整洁。
导航菜单：在导航菜单中，当菜单项过多时，可以使用滚动条或隐藏超出部分。

示例代码

以下是一个使用 jQuery 实现文本溢出隐藏的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 超出隐藏示例</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #ccc;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        这是一个非常长的文本，需要使用 jQuery 来隐藏超出部分并显示省略号。
    </div>

    <script>
        $(document).ready(function() {
            $('.container').each(function() {
                var text = $(this).text();
                if (text.length > 20) {
                    $(this).text(text.substring(0, 20) + '...');
                }
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：为什么使用 jQuery 超出隐藏时，文本没有正确显示省略号？

原因：

CSS 样式未正确设置：确保 .container 类中设置了 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;。
jQuery 代码未正确执行：确保 jQuery 库已正确引入，并且 jQuery 代码在文档加载完成后执行。

解决方法：