Cut Off Text String with Ellipses

It’s a fun thing, learning to code. There’s a great sense of accomplishment when thinking of something that doesn’t exist and putting it into being by yourself.

I recently finished something I wanted to work on — a Title & Description SEO Tool that updates text as you type and shows it like it would be in the Search Engine Results Pages (SERPs).

Working in SEO, I write a lot of content for websites and wanted a simple tool to help me write things like meta titles and descriptions. I wanted it to live update the text with a SERP-like preview and warn me when the characters are getting close to the limit.

We should always be thinking mobile-first and know how it will look in mobile search results. If your title or description is too long, Google will cut it off in the results, like so:

An example from LA Times where both Title and Description are cut off

The Code

In the tool, there are text fields to input both title and description. The first issue was getting the text to update as someone typed in the text field.

var object = document.getElementById('objectID'); object.onkeyup = object.onkeypress = function(){ document.getElementById('previewID').innerHTML = this.value;

In the above example, I use both onkeyup JS event and onkeypress event to capture each key pressed but also to note the characters in the case that someone holds the key down. Then, the innerHTML of the area being previewed live will be updated with this.value or the text being input.

if($('#previewID').text().length > maxLength) { $('#previewID').text($('#previewID').text().substr(0, maxLength - 3) + "..."); };

Continuing directly below, we check the text length against the max length, whatever you may want that to be. We want to say that IF the length of the text that we are typing is greater than our preset max length, THEN we want to use the JavaScript substr() method to cut the string off, starting at 0 characters and ending at our max length -3 to account for the three ellipses we are about to add.

So the whole think together looks like this:

var object = document.getElementById('objectID'); object.onkeyup = object.onkeypress = function(){ document.getElementById('previewID').innerHTML = this.value; if($('#previewID').text().length > maxLength) { $('#previewID').text($('#previewID').text().substr(0, maxLength - 3) + "..."); }; };

Using the substr() method lets us stop the text once our max number is reached and replace the end with an ellipses just as Google would in the SERP. Even if we keep typing, all that will show up is that ellipses to show that the title or description is too long.

Additional Resources

If you are just doing this in one line, CSS-Tricks shows a good example of a simpler way to do this with just CSS. Also, Intel has a great reading that essentially shows what I did above plus the correct way to do ellipses (which I did not do).

I Did a Thing!

I figured this out with the help of the internet and wanted to write and share my experience. If you have any tips on improvement, I’m all ears!

It was cool to start by seeing something that didn’t exist how I wanted, building it, and getting it to work, if only for my own personal use. I hope that this has helped explain my process and I look forward to doing more posts like this in the future.

p.s.

As I’m typing in meta data into my Ghost Dashboard for this blog post, I’m realizing it’s almost exactly like they have here!

You know what, It totally holds up. I even typed too long of a description and the character count turned red and there are ellipses in the description preview. I’m pretty proud of myself, I must say.

I realize this is more for my own pride than any reading benefit, so I apologize there — but the realization was quite funny timing!


Originally published at blog.benthom.me on May 12, 2017.

Like what you read? Give Ben Thompson a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.