如何用jQuery和媒体查询实现响应式可点击标题的截断与恢复？

我有如下包含标题的HTML结构：

<div class='titles'>
<h2 class="post-title"><a href="www.example.com">Some example Title 1</a></h3>
<h2 class="post-title"><a href="www.example.com">Some example Title 2</a></h3>
<h2 class="post-title"><a href="www.example.com">Some example Title 3</a></h3>
</div>

需求：

• 在移动端（窗口宽度≤600px）时，自动将标题截断为指定长度（比如显示为「some example...」），截断后标题仍保持原链接的可点击性
• 当窗口宽度>600px时，标题恢复完整显示

我尝试了以下jQuery脚本：

$(window).resize(function() {
    if (window.matchMedia('(max-width: 600px)').matches) {
       
       $("h3.post-title").each(function(){
    len=$(this).text().length;
      $(this).text($(this).text().substr(0,20)+'...');

  });       
      
 
    }
});

但存在两个问题：

1. 截断后的标题失去了原链接的可点击性
2. 窗口宽度超过600px时，无法恢复完整标题

请问如何实现满足需求的功能？

核心思路 #

• 提前保存每个标题的原始文本，避免截断后无法恢复
• 直接操作<a>标签而非外层<h2>，保证链接可点击性不受影响
• 页面初始化时就执行状态判断，同时监听窗口resize事件切换显示状态

完整jQuery实现代码 #

$(document).ready(function() {
    // 保存每个链接的原始文本到自定义数据属性
    $(".post-title a").each(function() {
        $(this).data("original-text", $(this).text());
    });

    // 封装标题处理逻辑为函数
    function toggleTitleDisplay() {
        const isMobile = window.matchMedia('(max-width: 600px)').matches;
        
        $(".post-title a").each(function() {
            const originalText = $(this).data("original-text");
            if (isMobile) {
                // 截断到20个字符并添加省略号
                $(this).text(originalText.length > 20 ? originalText.substr(0, 20) + '...' : originalText);
            } else {
                // 恢复原始完整文本
                $(this).text(originalText);
            }
        });
    }

    // 页面加载时执行一次，确保初始状态正确
    toggleTitleDisplay();

    // 监听窗口尺寸变化，实时切换标题状态
    $(window).resize(toggleTitleDisplay);
});

代码说明 #

• 保存原始文本：通过data()方法把每个链接的原始内容存在自定义属性中，恢复时直接读取该值，避免DOM文本被覆盖后无法还原
• 操作链接元素：直接修改<a>标签的文本内容，外层链接结构完全保留，可点击性不受任何影响
• 初始化执行：页面加载完成后立刻执行判断逻辑，避免刚打开页面时窗口已处于移动端尺寸但标题未截断的问题
• 复用逻辑函数：把标题处理逻辑封装成独立函数，减少重复代码，保证resize事件触发时能正确切换状态

轻量替代方案：纯CSS截断 #

如果不需要精确控制字符数，仅要求标题在一行内自动截断并显示省略号，用CSS就能实现，无需JS：

/* 默认状态：完整显示标题 */
.post-title a {
    white-space: normal;
}

/* 移动端（≤600px）：截断显示 */
@media (max-width: 600px) {
    .post-title a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

该方案性能更优，无JS监听开销，缺点是只能按容器宽度截断，无法精确控制字符数量，可根据实际需求选择。

内容的提问来源于stack exchange，提问作者Ali