Question

我有一个有趣的问题。我试图根据屏幕宽度响应缩短所有文本的长度，使用类'ideaDescription'。问题是，我运行一个函数来减小文本的大小，然后这就成了新的'ideaDescription'。我不确定最好的办法是将描述存储在数组中吗？或者，还有更好的方法？

<p class="ideaDescription">Lorem ipsum dolor ... condimentum.</p>
<p class="ideaDescription">More lorem ipsum dolor ... condimentum.</p>

$(document).ready(function () {

            function addEllipsis() {
                $('.ideaDescription').each(function addEllipsis() {

                var thisText = $(this).html()
                var maxLength = $(window).width()/4;

                if (thisText.length > maxLength) {
                    var trimmedString = thisText.substr(0, maxLength);

                    trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));

                    trimmedString += '...<span class="glyphicon glyphicon-chevron-right"></span>';

                    this.innerHTML = trimmedString;
                }
            });                 
            };

            addEllipsis();

            $(window).resize(function () {
                addEllipsis();
            });
});

Answer 1

有一个名为DotDotDot的库会为您执行此操作。您可以找到它here.请注意，该库不再被主动维护，但我仍然使用它并且它工作得非常好。

只要ideaDescription的高度响应，你就会使用这样的东西：

$('.ideaDescription').dotdotdot({watch: "window"})

您还可以将回调函数传递给dotdotdot调用，该调用接收两个参数isTruncated（布尔值）和orgContent（原始内容）。

$('.ideaDescription').dotdotdot({watch: "window", function(isTruncated, orgContent){ *do something* });

编辑：dotdotdot似乎要求您尝试截断的元素在CSS中具有已定义的大小，因此您可能必须首先执行以下操作：

$('.ideaDescription').css('height', $('.ideaDescription').outerHeight());

JQuery - 响应式字符串修剪难题

1 个答案: