Rails Truncate

Rails Truncate

 

Background Info

Ruby on Rails has a pretty steep learning curve.  I should know, I’ve been working with it all summer and I’ve just recently crossed the break-even point in my code to Google ratio.  It doesn’t help that I’d never seen Ruby before.  I’ve been working with PHP off and on for over 10 years and for the last two I’ve been using the CodeIgniter framework (which supposedly, is loosely based on rails).

For me there have been many difficult aspects of Rails.

  • Compared to PHP the setup is pretty involved
  • There’s a lot of command line stuff which, initially, made me really uncomfortable
  • Learning Ruby at the same time is somewhat challenging since it’s hard to know where Ruby ends and Rails begins
  • I’d never written automated tests before and I’m determined to write many now, since it’s the “Rails way”
  • Rails does a lot of stuff “automagically” – really, a lot of stuff
  • Ruby is very flexible which usually means there’s about 3,600 ways to solve any problem.  What’s the best way?

I’m sure there will be more to come on all of these topics but today I’ll focus on the last bullet.  Since I’m still new to Rails I really want to learn to do things the right way.  This includes even simple things – so let’s begin.

The Problem

To learn Rails I decided to build a bug tracking system from scratch.  I needed to track bugs/feature requests on another project that I was doing and I really needed an excuse to build something – so why not?  Since I’m doing this to gain a better understanding of Rails, I didn’t want to spend a ton of time on the front end so I started with using basic tables to display the data.  This became somewhat problematic when an item had a long description.

Tracker Items View

Ideally, this is what the item table should look like

Tracker Items

With a lot of text it doesn’t look so good

Pop-up notes

The solution I had in mind was to show the first 20 characters or so and show the rest of the notes in a tooltip when the user hovers over the shortened text.  I’ve done things like this with various string functions so it should be pretty straightforward.

My first thought was: if the note’s length was over 20, I’d take the first 19 characters of the note and add an ellipsis.  Easy enough right? Note: the full note is displayed when you hover over the span, thanks to the data-content value and some unseen JavaScript.

<% if item.notes.length > 20 %>
  <span class="details" data-content="<%= item.notes %>">
    <%= item.notes[0..18] %>...
  </span>
<% else %>
  <%= item.notes %>
<% end %>

This worked pretty well with one glaring exception.

Truncated Notes

This is a long wha…?

It bothered me pretty quickly that the text was truncated in the middle of words, or even worse right after a space.  Great, now what?  I’m going to have to search for a space in my text near the 20th character, do some sort of substring, etc.  No doubt it’s going to be more difficult than [0..18]. Surely someone else had gone through this before. It was Google time.

The Solution

My search led me to this StackOverflow question.  The selected answer was the same as my first technique but something on the final answer caught my eye.

You’re looking for truncate

I read through the Rails documentation in the provided link and sure enough, that’s exactly what I needed.  Rails provides a helper called truncate which:

Truncates a given text after a given :length if text is longer than :length (defaults to 30). The last characters will be replaced with the :omission (defaults to “…”) for a total length not exceeding:length.

So now I can do this:

<% if item.notes.length > 20 %>
  <span class="details" data-content="<%= item.notes %>">
    <%= truncate item.notes,length:20, separator: ' ' %>
  </span>
<% else %>
  <%= item.notes %>
<% end %>

which is exactly what I needed.  Here’s the final product.

Truncate with Tooltip

Jackpot!

In summary, the truncate helper in Rails provides a nice way to show a text excerpt and includes an option to break at a specific point in your string, such as a space.  It’s another way Rails makes your life easier and your code more beautiful.  Check out all of the options in the Rails documentation.

Show Comments Hide Comments