[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla # Cómo acortar textos con PHP y con CSS en Joomla [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 01 Agosto 2018 [Tips Joomla](https://sergioiglesias.net/blog/joomla) 2 - 3 minutos Visitas: 4661 - - [ Formación Joomla ](https://sergioiglesias.net/etiquetas/formacion-joomla) - [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla) - [ Plantillas Joomla ](https://sergioiglesias.net/etiquetas/plantillas-joomla) ![](https://sergioiglesias.net/images/blog/tips/acortar-textos-joomla.png) 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 [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/acortar-textos-php-css-joomla "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Facortar-textos-php-css-joomla&text=C%C3%B3mo%20acortar%20textos%20con%20PHP%20y%20con%20CSS%20en%20%23Joomla%20-%20%23TipsJoomla%20%23MejorConJoomla%20por%20%40sergiois "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=C%C3%B3mo%20acortar%20textos%20con%20PHP%20y%20con%20CSS%20en%20%23Joomla%20-%20%23TipsJoomla%20%23MejorConJoomla%20por%20%40sergiois%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Facortar-textos-php-css-joomla "Enví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](https://sergioiglesias.net/blog/joomla/345-como-hacer-un-override-de-la-vista-de-articulo-en-joomla). 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](https://ligacasosclinicos.com) (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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/acortar-textos/css-forma-1_1230.jpg?version=89db1aedc8afc1c55c6ab4a3acfb5f75) 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/acortar-textos/css-forma-1-sin_1230.jpg?version=443f250b6f1e52f52110f1d20e8d71b6) ### 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/acortar-textos/css-forma-2-sin_1230.jpg?version=121c1634b049644cebc108932af9bca3) 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/acortar-textos/css-forma-2_1230.jpg?version=078da3e4916452c8ebcf814feb56c87c) 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 [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/acortar-textos-php-css-joomla "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Facortar-textos-php-css-joomla&text=%C2%BFQuieres%20saber%20c%C3%B3mo%20acortar%20textos%20con%20PHP%20y%20con%20CSS%20en%20%23Joomla%3F%20-%20%23TipsJoomla%20%23MejorConJoomla%20por%20%40sergiois "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=%C2%BFQuieres%20saber%20c%C3%B3mo%20acortar%20textos%20con%20PHP%20y%20con%20CSS%20en%20%23Joomla%3F%20-%20%23TipsJoomla%20%23MejorConJoomla%20por%20%40sergiois%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Facortar-textos-php-css-joomla "Enví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. [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado ### ¿No sabes bien en qué estado está tu web Joomla? Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden. Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML [ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables [![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS. [](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias") ### Suscríbete a mi newsletter ¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo. Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**. [Quiero apuntarme!](https://sergioiglesias.net/newsletter) ### No hay comentarios ### Deja tu comentario En respuesta a Some User Nombre \* Dirección de email \* Texto del comentario \* Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*