Cómo acortar textos con PHP y con CSS en Joomla

A veces nos vemos en la necesidad de tener que acortar textos para mantener un diseño correcto, por ejemplo en módulos de noticias de Joomla. En este artículo te voy a enseñar varias formas de hacerlo.

Acortar texto con PHP

Una forma segura de hacerlo es tienes acceso al lenguaje de programación de determinados módulos (tanto nativos de Joomla como de terceros).

Consejo: si vas a tocar cualquier código de una extensión recuerda hacerlo a través de los overrides.

Lo dicho, si tienes acceso al código aquí te dejo unas líneas que puedes utilizar para acortar textos con PHP.

Acortar texto con CSS

Otra forma que tienes para acortar textos es a través de estilos o CSS.

Se trata de un recurso en el que no tendrás que tocar código (por si no te sientes cómodo haciéndolo, por si no tienes acceso al mismo o porque el recurso encaja dentro de tu diseño).

A través de estilos puedes usar alguna de estas 2 formas que te presento a continuación:

Forma 1: text-overflow: ellipsis;

Se trata de una propiedad de CSS para truncar texto; es decir, la forma de cómo debe enviarse al usuario el contenido que se "desborda" de unos límites establecidos.

Se puede recortar, mostrar puntos suspensivos (...) o mostrar una cadena personalizada.

Esta propiedad debe ir acompañada de estas otras 2:

white-space: nowrap;
overflow: hidden;

Como ejemplo, te presento un módulo que he utilizado en la Liga de los Casos Clínicos (un proyecto que he desarrollado con Joomla en la Sociedad Española de Cardiología):

width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;

El resultado es el siguiente:

Como puedes ver en la imagen anterior, el texto del equipo que aparece en segundo lugar es "Cojinetes endocárdic..." mientras que el texto verdadero es "Cojinetes endocárdicos defectuosos".

Lo que hace el CSS es marcar un ancho de 150 píxeles y, si no entra en ese tamaño todo el texto, lo recorta y le añade los puntos suspensivos.

Si no añadimos estos estilos, el resultado sería el siguiente:

Forma 2: overflow: auto;

Otro recurso es acortar los textos que van dentro de un div en cuanto a su altura.

Por ejemplo, imagina varios módulos en una misma fila que tienen textos de diferentes tamaños.

Como ves en la figura, no queda muy bien estéticamente hablando.

Si aplicamos los siguientes estilos:

height: 150px;
overflow: auto;

El resultado es el siguiente:

Como ves en la imagen anterior, se añade un alto fijo (de 150 píxeles) y una barra de desplazamiento vertical o "scroll" para que se pueda leer todo el texto.

De esta forma todos los módulos tienen un mismo alto y que mucho mejor en cuanto a estética.

Espero que estos recursos para acortar textos en Joomla con PHP y con CSS te ayuden en tus proyectos.

Si tienes alguna otra forma puedes compartirla en los comentarios.