I was given code snippets in css, html and  php with the aim of achieving the same output. How we go about this depends on the execution and who the functionality is aimed at. My own implementations tend to be less geared towards customer-friendly code if I’m using it on my own website but I wanted to consider which could be used by customers who update their own sites.

How To Truncate Text

Truncating text is particularly useful when long content needs to be displayed as a preview, such as in blog articles or product descriptions. It also helps when space is limited in templates or modules, ensuring a cleaner layout.

There are several methods for performing this task. In this short article I will look at three of these.

1. As a possible plugin / modules
2. Using JavaScript
3. As CSS

Plugin / Module / (PHP, Server-side)

Joomla provides us with HTMLHelper::truncate(), which safely truncates text while preserving the HTML structure.

Using this helper I could make a function within a module, or plugin, that shortens text to a certain length. I imagined setting a parameter that would allow the user to set text to be shortened to their desired length. This would be useful if the end user of the website is not a coder / developer. Without writing all the code for this we could start with the following: 

use Joomla\CMS\HTML\HTMLHelper;

use Joomla\CMS\Factory;

$input = Factory::getApplication()->getInput();

$string = "<p>This is a very long Joomla text that needs to be truncated in a preview.</p>"; // this would be an input string

$truncLength = = $input->get(trunc_length, default_value, filter);

$truncatedText = HTMLHelper::_('string.truncate', $string, $truncLength);

echo $truncatedText;

JavaScript

Using JavaScript we can create a Client-side, Dynamic function. 

If you prefer to truncate text directly in the browser, you can use JavaScript, like this, where we can identify the text using an identifier that is called in the script: 

<p id="text">This is very long Joomla text that needs to be truncated in a preview.</p>

<script>

function truncateString(str, num) {

    return str.length > num ? str.slice(0, num) + "..." : str;
}

document.addEventListener("DOMContentLoaded", function () {

    let textElement = document.getElementById("text");

    textElement.innerText = truncateString(textElement.innerText, 50);

});

</script>

This script would need to be added to the template of the website whether through a custom code box in the template configuration, or inserted into the template file. A user would however need to add the ID to the element. Bear in mind that if it were to be applied to more than one instance it might be better to use a class, ie the getElementsByClassName() method.

The benefit of using JavaScript is we are using long-established syntax, unlike the final example. The downside is that it can stop working if there’s an error in the script.

CSS

In CSS line-clamp can visually limit text without modifying content. In CSS this method is an option, but be careful as it does not work in screenreaders:

.truncate {

    display: -webkit-box;

    -webkit-line-clamp: 2; /* Number of lines */

    -webkit-box-orient: vertical;

    overflow: hidden;

}

<p class="truncate">This is a very long Joomla text that needs to be truncated in a preview.</p>

There’s also limitations using this method however as not all browsers currently support “line-clamp”. At the time of writing, Mozilla was reporting “limited availability” of line-clamp, or -webkit-line-clamp with Chrome and Edge not being compatible yet. So while it’s possible, don’t rely on it to work everywhere. Yet! 

In this short article we can see one method applied in 3 different ways to suit the use case.