javascript - 窗口大小调整时多行文本 chop

Question

我正在编写 jQuery 应用程序，但遇到了障碍。

我需要我的双行描述简介能够在浏览器大小调整时随着文本回流而做出响应。下面的示例成功地收缩了字符串的大小，并在缩小浏览器时替换为省略号。但是当您扩大浏览器时，字符串不会随之扩展。

简而言之，jQuery 会在浏览器调整大小(较小)时削减文本，但不会在浏览器调整大小(较大)时重新添加文本。

当浏览器大小调整得更大时，我确实需要将文本添加回来。

这是标记:

<!-- html -->
<div class="description-container">
  <span class="description-blurb">When France decided to participate in the
  International Geophysical Year by sending teams to Antarctica, it did lorem
  ipsum dolor amet this text will be truncated or else I will be very, very
  upset inside.</span>
</div>

Sass 如果您觉得需要它(不确定这个问题是否有必要):

// Sass
.feature .description-container {
  @include box-sizing;
  height: 1.875rem;
  width: 100%;
  margin-top: 3.125rem;
  margin-bottom: 1.25rem;
  color: $light-grey;
  font-size: .6875rem;
  font-weight: 200;
  line-height: 1rem; // revisit this value
}
.feature .content-shadow {
  height: .1875rem;
  width: 100%;
  @include linear-gradient(rgba(0, 0, 0, .1), transparent);
  margin-bottom: .4375rem;
}

这是脚本:

// jQuery
while($('.description-blurb').outerHeight() > $('.description-container').height()) {
    $('.description-blurb').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}
$(window).resize(function() {
while($('.description-blurb').outerHeight() > $('.description-container').height()) {
    $('.description-blurb').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}
});

我试图通过寻找答案来尊重每个人的时间。但我没有运气:(

如果有人能回答我，我将不胜感激。

Answer 1

如果您想修复您的解决方案，则必须在进行任何修改之前存储初始文本并将其设置到您的 div 中。剪切文本的某些部分后，您无法将其返回，因为您的 html 元素不再包含它。因此，修复您的解决方案:

$(function () {
    var initial = $('.description-blurb').text();

    $('.description-blurb').text(initial);
    while($('.description-blurb').outerHeight() > $('.description-container').height()) {
        $('.description-blurb').text(function(index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }

    $(window).resize(function() {
        $('.description-blurb').text(initial);
        while($('.description-blurb').outerHeight() > $('.description-container').height()) {
            $('.description-blurb').text(function(index, text) {
                return text.replace(/\W*\s(\S)*$/, '...');
            });
        }
    });
});

这个示例必须工作，但是我强烈建议您检查文本溢出 CSS 属性。将它用于多行文本有点棘手，但是这个 comprehensible article有助于理解该技术。作者甚至添加了 Saas mixin，希望对您有所帮助。