How to Add Ellipsis (3 Dots) to a Hugo Summary (Excerpt)

Let’s say that you have a blog and want excerpts of your latest posts to be displayed on your homepage, as I do.

Hugo lets you do this automatically with the .Summary page variable, which, by default, takes the first 70 words from your content and creates the excerpt.

Now, if you’re like me and want your excerpts to end with an ellipsis (...), not a period, then you’ll have to perform a simple workaround.

Add Ellipsis to a Summary (Excerpt) in Hugo

What you need to do is to make use of the “truncate” function.

Go to where you have your .Summary page variable and add | truncate SIZE, where SIZE is the number of characters you want to show—for example, 220.

So, it should look like this:

<p>{{ .Summary | truncate 220 }}</p>

How to remove the space before the ellipsis

By default, the Hugo truncate function adds a space before those three dots, like this:

Your excerpt ...

If you want to remove that space, you can add a string to the truncate function, which allows you to change Hugo’s default ellipsis.

You can do it like this:

<p>{{ .Summary | truncate 220 "..." }}</p>

As you can see, I simply added an ellipsis between quotation marks, after the size.

You can add something else intstead of the three dots if you want—for example:

<p>{{ .Summary | truncate 220 ">>>" }}</p>

That’s a Wrap

I hope you found the guide helpful.

If some info is outdated or incorrect, or you have anything to add, say or ask, please contact me via Twitter or email.