jquery - 在 Ruby On Rails 中截断和展开字符串

Question

在我的 Ruby On Rails 应用程序上，我遇到的情况是，当我显示字符串值时，它应该只显示 100 个字符，当用户将鼠标悬停在字符串值上时，它应该显示所有字符串值。

例如:一个例子是 al..

鼠标悬停时:示例总是比描述情况更好。

我尝试使用 Ruby On Rails 内置 func => truncate(title.to_s,:length=>100)。我知道我只能使用上面的内容来截断。

上述问题的解决方案是什么，Ruby On Rails 解决方案或 jQquery 解决方案最好

Answer 1

如果您想在鼠标悬停时展开文本，那么我建议在 jQuery 中实现该解决方案，因为这意味着那些没有打开 JS 的人将可以看到全文(即，这有利于可访问性) 。以下内容基于我们在网站上使用的内容，通过单击文本而不是悬停在文本上来切换完整/简短文本，但更改为悬停事件应该相当简单。

首先，使用一个类将要自动扩展/收缩的文本包装在 div/span 中，稍后您可以使用该类在 jQuery 中选取它。

<div class="autoShorten">An example is always better than description situation.</div>

然后创建以下 jQuery 函数:

jQuery.fn.autoShorten = function() {
return this.each(function(){
    if ($(this).text().length > 100) {
        var words = $(this).text().substring(0,100).split(" ");
        var shortText = words.slice(0, words.length - 1).join(" ") + "...";
        $(this).data('replacementText', $(this).text())
        .text(shortText)
        .css({ cursor: 'pointer' })
        .hover(function() { $(this).css({ textDecoration: 'underline' }); }, function() { $(this).css({ textDecoration: 'none' }); })
        .click(function() { var tempText = $(this).text(); $(this).text($(this).data('replacementText')); $(this).data('replacementText', tempText); });
    }
});
};

此函数的另一个优点是可以在断词处而不是在单词中间插入省略号

最后在您的 $(document).ready 函数中添加$('.autoShorten').autoShorten();