Introducción
En listados de entradas, archivos o resultados de búsqueda en WordPress es común que títulos muy largos rompan el diseño o ocupen demasiado espacio. Una solución elegante y moderna es aplicar un recorte visual multilínea con ellipsis usando la técnica conocida como line-clamp en CSS. Este artículo explica en detalle cómo implementarlo correctamente, cómo integrarlo en un tema o plantilla de WordPress y qué alternativas/consideraciones tener en cuenta para compatibilidad, accesibilidad y SEO.
Qué hace line-clamp y por qué usarlo
line-clamp permite mostrar solo un número determinado de líneas de texto y recortar el resto con puntos suspensivos. Es útil porque:
- Mantiene el HTML intacto (el título completo sigue en el DOM y es indexable por buscadores).
- Evita manipular el texto con PHP (truncado por palabras o caracteres), lo que puede romper títulos o quitar contexto.
- Es visualmente consistente y se adapta al ancho disponible cuando se combina con técnicas responsive.
Técnica básica CSS
La forma más compatible actualmente combina propiedades de caja flex/box de WebKit:
.entry-title.clamp {
display: -webkit-box / necesario para -webkit-line-clamp /
-webkit-box-orient: vertical / dirección de las líneas /
-webkit-line-clamp: 2 / número de líneas a mostrar /
overflow: hidden / recorta el contenido sobrante /
text-overflow: ellipsis / puntos suspensivos (funciona con single line pero es útil) /
word-wrap: break-word / evita desbordes por palabras largas /
line-height: 1.3 / define la altura de línea para calcular alturas /
max-height: calc(1.3em 2) / opcional: refuerzo visual consistente /
}
En el ejemplo anterior se limitan los títulos a 2 líneas. Ajusta -webkit-line-clamp y max-height según el número de líneas deseadas y el line-height.
Uso de variables CSS para controlar líneas desde HTML
Puedes exponer el número de líneas como una variable CSS y cambiarlo por entrada o por breakpoints:
.entry-title.clamp {
--lines: 2 / valor por defecto /
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: var(--lines)
overflow: hidden
line-height: 1.25
max-height: calc(1.25em var(--lines))
}
/ ejemplo responsive: más líneas en pantallas grandes /
@media (min-width: 900px) {
.entry-title.clamp { --lines: 3 }
}
Nota: la aceptación de custom properties en combinación con -webkit-line-clamp puede variar según navegador en la práctica funciona en muchos navegadores basados en Chromium y WebKit pero testea en tu target de navegadores.
Integración en WordPress (plantillas y loop)
La integración más simple es añadir una clase al título que quieras recortar en el loop del theme. Ejemplo típico en single.php / archive.php / index.php donde se muestra cada post:
/ dentro del loop de WordPress /
if ( have_posts() ) :
while ( have_posts() ) : the_post()
?>
>
Si no quieres editar plantillas directamente, puedes filtrar la salida del título o añadir la clase con un pequeño filtro:
/ functions.php: añadir clase clamp al título del loop (solo ejemplo básico) /
add_filter(the_title, mi_agregar_clase_clamp_al_titulo, 10, 2)
function mi_agregar_clase_clamp_al_titulo(title, post_id) {
// Solo modificar en el loop (front-end)
if ( is_admin() ) return title
// Evitar afectar títulos fuera de la salida normal (widgets, menús)
if ( !in_the_loop() ) return title
return . title .
}
Precaución: al modificar la salida de the_title debes tener cuidado con la semántica y con cómo los temas esperan etiquetas (h1, h2). El ejemplo anterior usa un span si prefieres outputs semánticos, lo ideal es editar el template directamente.
Cómo añadir el CSS al tema correctamente
Una buena práctica es añadir tu CSS al archivo principal del tema o enqueuearlo desde functions.php para asegurar que se carga en el front-end:
function mi_tema_enqueue_styles() {
wp_enqueue_style(mi-tema-main, get_stylesheet_uri())
/ También puedes inyectar CSS específico /
css = .entry-title.clamp{display:-webkit-box-webkit-box-orient:vertical-webkit-line-clamp:2overflow:hiddenline-height:1.3}
wp_add_inline_style(mi-tema-main, css)
}
add_action(wp_enqueue_scripts, mi_tema_enqueue_styles)
Alternativamente, pega el CSS en Apariencia → Personalizar → CSS adicional si necesitas cambios rápidos sin tocar archivos del theme.
Compatibilidad de navegadores y alternativas
| Característica | Navegadores (a grandes rasgos) | Comentario |
|---|---|---|
| -webkit-line-clamp | Chrome, Edge (Chromium), Safari, Opera | Funciona bien en WebKit/Blink. Soporte parcial en Firefox (limitado históricamente). |
| Mask gradient (fallback) | Major browsers | Útil para simular fade-out al final del bloque no recorta por líneas exactamente. |
| Solución JS | Universal | Con JS se puede contar líneas y truncar con precisión en navegadores que no soporten -webkit-line-clamp. |
Si necesitas soporte perfecto en navegadores sin -webkit-line-clamp (por ejemplo algunas versiones de Firefox o navegadores antiguos), implementa un fallback con JS que mida la altura del contenedor y recorte el texto agregando puntos suspensivos.
Ejemplo de fallback con JS (opcional)
/ clamp.js: recorta títulos por líneas si no hay soporte nativo /
(function(){
function supportsLineClamp(){
return (webkitLineClamp in document.documentElement.style) false
}
if (supportsLineClamp()) return // ya soporta
var items = document.querySelectorAll(.entry-title.clamp)
items.forEach(function(el){
var lines = parseInt(window.getComputedStyle(el).getPropertyValue(--lines)) 2
var lineHeight = parseFloat(window.getComputedStyle(el).lineHeight)
var maxHeight = lineHeight lines
var text = el.innerText.trim()
if (el.scrollHeight <= maxHeight) return
// simple truncation por palabras
var words = text.split( )
var out =
for (var i=0i maxHeight) {
// quitar la última palabra que causó overflow
out = out.split( ).slice(0,-1).join( )
el.innerText = out …
return
}
out = el.innerText.replace(/…/,)
}
})
})()
Ese script es simple y puede mejorarse para considerar enlaces, etiquetas HTML dentro del título y accesibilidad. Úsalo como punto de partida.
Accesibilidad y SEO
- El recorte con CSS es puramente visual: el título completo permanece en el DOM, por lo que los motores de búsqueda indexan la totalidad y los lectores de pantalla leen el texto completo. Evita recortar permanentemente en el HTML cuando la intención sea solo visual.
- Si ocultas texto con display:none o aria-hidden, podrías afectar el SEO y accesibilidad. No uses esas técnicas si quieres conservar el contenido para lectores de pantalla y bots.
- Para usuarios que necesiten ver el título completo, considera añadir title attributes o tooltip: lta title=Título completogt…lt/agt, aunque no es obligatorio si el DOM ya contiene todo.
Buenas prácticas y consideraciones finales
- Usa CSS line-clamp para recortes visuales cuando el objetivo sea estética y consistencia del layout.
- Conserva el título completo en el DOM para SEO y accesibilidad.
- Controla el line-height para que el recorte por líneas sea predecible entre navegadores.
- Prueba en distintos dispositivos y navegadores añade fallback JS si tu público incluye navegadores sin soporte.
- Evita mezclar truncado CSS con truncado PHP normalmente uno solo es suficiente y el CSS es más flexible para diseños responsivos.
Ejemplo completo: fragmento de template CSS
Plantilla (loop) y CSS mínimo para aplicar en un tema:
/ fragmento del loop.php / while ( have_posts() ) : the_post() ?>> >
/ style.css / .entry-title.clamp { --lines: 2 display: -webkit-box -webkit-box-orient: vertical -webkit-line-clamp: var(--lines) overflow: hidden line-height: 1.25 max-height: calc(1.25em var(--lines)) } @media (min-width: 900px) { .entry-title.clamp { --lines: 3 } }Con esto tendrás títulos visualmente recortados en listados manteniendo el contenido completo en el DOM, una solución limpia y moderna para mantener la coherencia de tus diseños en WordPress.
Leave a Reply