Sometimes when pulling in a blog post on the front page or placing a title in a constrained space, automatic truncating can come in really handy.

Now Webpop makes it really easy to truncate anything in a safe way, just use the new "truncate" attribute in your pop tags:

<pop:body truncate="100"/>

This will display a body field truncated to at most 100 characters.

You can also specify an ellipsis to use in case truncating is necessary:

<pop:title truncate="17" ellipsis="..."/>

This would turn the title "Truncate All The Things" into "Truncate All The ...".

We've taken great care to make truncate safe to use by making it HTML aware.

Imagine you have a body field that looks like this:

<p>This has <strong>bold</strong> text</p>

And you use it like this:

<pop:body truncate="20"/>

If we simply counted characters and cut off after 17 we would end up with a body looking like this:

<p>This has <strong>b

First of all we would leave an ugly "b" hanging. Not nice!

We would also end up with just 10 visible characters even though we were asked to leave 20.

But even worse: we would leave an unclosed strong tag around, potentially messing up the rest of the page, making everything bold. Not nice at all!

Fortunately Webpop behaves way better than that. When truncating we don't count characters inside html tags, we never cut words in half and we make sure every open tag gets closed. Very nice indeed!