(Tiempo estimado: 2 - 3 minutos)

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.

Cómo acortar textos con PHP y con CSS en #Joomla - #TipsJoomla #MejorConJoomla por @sergiois Tuitéalo

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:

Acortar textos Joomla con CSS - Forma 1

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:

Acortar textos Joomla con CSS - Forma 1 - Sin estilos

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.

Acortar textos Joomla con CSS - Forma 2 - Sin estilos

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:

Acortar textos Joomla con CSS - Forma 2

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.

¿Quieres saber cómo acortar textos con PHP y con CSS en #Joomla? - #TipsJoomla #MejorConJoomla por @sergiois Tuitéalo

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.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo