Neatly shorten text that is too long to display.

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!

Comments

[Lankinen]

I had this same problem with Trimmed News. I needed to show summary of news for the users. Sometimes summary was pretty short and sometimes it was quite long.

First I tried to change the font size in a way that the font would always fit into the box. This didn’t worked because number of characters isn’t correlation directly with the length. This causes sometimes way too small text.

Then I got advice to design it again. And so I did. Because I didn’t want to just add basic scroll in the final version the text was divided into cards the same way Instagram post can contain multiple images. It worked because one sentence fit into the card easily.

I think in title or some other similar places it might be better to do what you did but often the problem is in designing instead of execution.

[Joe Tiersma]

You bring up an interesting point. Design vs execution. It reminds me of all my psych major classes where we discussed nature vs nuture.

There are definitely those times when coding I see a problem and the solution is obviously a quick design change. Other times I know the solution is in the functionality. Often enough I believe it falls into a blend of the two.

So the philosophical question of being a developer is "How do I find the balance of function and design in my code?" I don't have an answer, but I believe it is the question we will all be continually pondering along our coding journey.

Thanks so much for your story and feedback!!!

[PatricNox]

I think the point is good, examples like so. But something that definitely would boost up the quality of this article would be screenshots of display beneath each code snippet.

Great article nevertheless!

[Joe Tiersma]

Thank you so much for the feedback! I'll definitely start implementing screenshots.