1

I have asked a similar question previously, but didn't give enough context. As a result I received an excellent, technically-correct answer that didn't solve my issue.

I've also looked around on Stack but don't know enough about jQuery to find my answer.

I need to truncate multi-line text with jQuery. The code needs to add/remove text as well when the browser window expands and contracts. So from my minimal understanding the code needs to store the text before truncating it so that it can add text back in when the browser window is expanded.

Initially this piece of code solved my problem:

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

This code no longer cuts it as when I use these .js classes more than once on a single page all the text is stored together and then spat out whenever the classes are being used.

Here is a jsFiddle of the the issue:

http://jsfiddle.net/1ddxtpke/

I need to store each .js-text text separately, so that I can use this jQuery snippet across a large project and have all instances of truncated text fed back into the DOM if a user were to expand their browser window size.

Is this possible? If so, how would I do it?

Thanks in advance for tackling my question. I hope I have been specific enough in what I'm looking for.

Improve this question
6
  • 1
    I unfortunately don't have the time to figure it out but I don't think you really need JS at all to do that. This can be pure CSS managed using text-overflow. Have a look here for example: css-tricks.com/line-clampin. Commented Oct 16, 2015 at 12:35
  • I'd recommend using a plugin that already does this. I've had success with dotdotdot Commented Oct 16, 2015 at 12:41
  • @Quentin thanks for this option. I will look into it. I would very much like to solve the issue with a variation of my jQuery snippet if possible though. Commented Oct 16, 2015 at 12:45
  • I can't agree with Quentin more. If you do this just for educational purposes, I guess you can do it with javascript, but a few lines of CSS should otherwise be the obvious choice. Commented Oct 16, 2015 at 12:55
  • @Daniel B Cheers—I understand the benefit of CSS over JS in this situation. But now that I've gone the JS route I am determined to find the answer anyhow. Commented Oct 16, 2015 at 12:57

3 Answers 3

Reset to default
3

There are several ways how to do this. You can store it in an array:

var initialValues = []; // Save the initial data $('.js-text').each(function () { initialValues.push($(this).text()); }); // On start while($('.js-text').outerHeight() > $('.js-text-truncator').height()) { $('.js-text').text(function(index, text) { return text.replace(/\W*\s(\S)*$/, '...'); }); } // When the window gets resized $(window).resize(function() { $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; }); while($('.js-text').outerHeight() > $('.js-text-truncator').height()) { $('.js-text').text(function(index, text) { return text.replace(/\W*\s(\S)*$/, '...'); }); } });

It has a catch though - the .js-text elements can't be erased or moved about, because it'll destroy the ordering. That'd require another function for order resetting in case something changes.

I haven't tested it, but in principle it should work this way.

EDIT: Okay, I reworked it a bit and here's the result:

var initialValues = []; // Save the initial data $('.js-text').each(function () { initialValues.push($(this).text()); while ($(this).outerHeight() > $(this).parent().height()) { $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...')); } }); // When the window gets resized $(window).resize(function() { $('.js-text').each(function (index) { $(this).text(initialValues[index]); while ($(this).outerHeight() > $(this).parent().height()) { $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...')); } }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This looks awesome—feels right. It's not firing so great int this jsFiddle though: jsfiddle.net/1ddxtpke/1 . Any ideas?
@DanMad Just a syntax error and a few other things. Check the updated solution - .js-text should now be a direct child of .js-text-truncator, if it's a problem, just change $(this).parent().height() to the appropriate selector.
This is excellent; exactly what I need. Thank you for taking the time
Hi @fiedlr, This solution is actually causing my browser to timeout and not load the page properly. Are you able to shed any light on what the problem might be?
The page loads instantaneously when I am only truncating one piece of text. But once I add the .js classes a second time and try to reload the page, the page just times out and never loads...
1

I see 2 ways of doing this :

1) Storing the full text as an attribute when needed. With this your text will stay with your div and can be retrived on expanding with a simple .attr .

2) Storing the text in an array and storing the index as an attribute on the div. This way is probably much more efficient than the previous one as I'm not sure what is the max length of a value of an attribute.

Improve this answer

1 Comment

Thanks for responding so quickly. Re option 2—I'm not too familiar with using arrays. In this situation how might the code look? Would you mind showing me with my jsFiddle?
0

your function one syntax error

var initialValues = []; // Save the initial data $('.js-text').each(function () { initialValues.push($(this).text()); }); // On start while ($('.js-text').outerHeight() > $('.js-text-truncator').height()) { $('.js-text').text(function (index, text) { return text.replace(/\W*\s(\S)*$/, '...'); }); } // When the window gets resized $(window).resize(function() { $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; }); while($('.js-text').outerHeight() > $('.js-text-truncator').height()) { $('.js-text').text(function(index, text) { return text.replace(/\W*\s(\S)*$/, '...'); }); } });

Demo Link http://jsfiddle.net/1ddxtpke/2/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.