Neatly shorten text that is too long to display.

Joe Tiersma — Sat, 16 Nov 2019 01:04:33 +0000

I am a code newbie and it is tough! I absolutely love coding though. I love problem solving, creating something from nothing, and seeing it all come to life! I most recently have been working on a website for a non-profit organization at a volunteer apprenticeship and have spent the last few months integrating the client's EventBrite account data to the Events page of their website.

One of the most recent problems I came across was in displaying the text from the description of the event. Some of the event descriptions were short, but most were very long. The client asked us if we could just show the first few lines of the description and then have a "Click to learn more" button.

I didn't quite know where to go with it. My first thought was to use CSS to styles it as partial text.



div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

It kind of worked, but it wasn't clean, and I couldn't pick how much of the text to show.

I asked one of my fellow apprentices and she helped me out. Since we were pulling all the data from the API and filtering it on the front end, we decided that putting some logic in the react function while mapping the data would be the easiest way to go.



events.map(({ name, start, logo, url, id, description }) => {
    const maxChar = 200
    if (description.text.length > maxChar) {
    description.text = description.text.substring(0, maxChar) + " . . ."
}

This worked out well. In the event card of each event we were now seeing about 5 lines of text and if the description was over 200 characters, it would be cut off and an ellipsis would be added. Pretty sweet, but it was still looking horrible because it was ending on half words like "summ . . ." instead of "summer . . ."

I knew there had to be a way to that we could also shorten the text to the blank space before the last word so that it wouldn't be cut off. I scoured my memory banks and came up empty. While chatting with a couple other apprentices they were able to help me find what I had been missing. I needed to use lastIndexOf(" ") to trim the text down



events.map(({ name, start, logo, url, id, description }) => {
  const maxChar = 200
    if (description.text.length > maxChar) {
      description.text = description.text.substring(0, maxChar)
      description.text = description.text.substring(0,
      Math.min(description.text.length, description.text.lastIndexOf(" "))) + " . . ."
}

That did it, I was so excited to see how clean the text was looking. I submitted a PR for the change. My tech lead also enjoyed how it was looking, but also gave me some suggestions to make my code more concise. I so easily default to the "If/Else" style statements. One of the nice features of JavaScript and React are the inline statements you can use. I made one final change to my code.



events.map(({ name, start, logo, url, id, description }) => {
  description.text =
    description.text.length > 200
      ? description.text.substring(0, 200)
      : description.text;
  description.text =
    description.text.length === 200
      ? description.text.substring(
          0,
          Math.min(
            description.text.length,
            description.text.lastIndexOf(" ")
          )
        ) + " . . ."
      : description.text;

I learned so much today! I am so very thankful for my tech and product leads and fellow apprentices. Asking for help is a great way to learn new skill and reinforce the once you already know. Keep coding friends!

Forem: Joe Tiersma

Neatly shorten text that is too long to display.