CODEWITHSUNDEEP
javascriptjquerytexttruncation
DanMad
DanMad

Reputation: 1735

Multiline Text Truncation on Window Resize

I am in the process of writing my jQuery app and have hit a snag.

I need my double line description blurb to be responsive as the text reflows when the browser is resized. My example below successfully contracts the size of the string and is replaced with ellipsis when you shrink the browser down. But when you widen the browser the string doesn't expand with it.

So in short—jQuery is cutting the text down on browser resize (smaller), but not adding the text back on browser resize (bigger).

I really need for the text to be added back when the browser is resized bigger.

Here's the markup:

<!-- 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>

The Sass if you feel you need it (wasn't sure it was necessary for the question):

// 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;
}

And here's the script:

// 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)*$/, '...');
    });
}
});

I have tried to be respectful of everyone's time by searching for an answer. But I have had no luck :(

If anyone has an answer I would be very much appreciative.

Upvotes: 0

Views: 1181

Answers (1)

ConstantineUA
ConstantineUA

Reputation: 1051

If you would like to fix your solution, you have to store the initial text and set it into your div before any modification. After you've cut some portion of the text, you can't return it back cause your html-element doesn't contain it anymore. So the fix to your solution:

$(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)*$/, '...');
            });
        }
    });
});

This sample has to work, however I would strongly recommend you to check the text-overflow CSS-property. Using it for a multi-line text is a bit tricky but this comprehensible article helps to understand the technique. The author even added a Saas mixin so I hope it will help you.

Upvotes: 3

Related Questions