Contenido

Cortar palabras con Javascript

25 May

+ 2

Hace 2 días vimos como una de las características de Firefox 3.0, la de soft hyphens nos permitía conseguir que las palabras extremadamente largas se corten evitando así que estás salgan del elemento contenedor.

wbr-navigator-compatibility

Está propiedad, implementado en la mayoría de navegadores, utiliza la entidad &shy; que se encarga de dividir la palabra en el lugar en la que se encuentra. Firefox, disponía de elementos que realizaban la misma funcionalidad, como el elemento <wbr /> o la entidad &#8203;. Podemos ver más información en este artículo de QuirksMode.

Etnas, me preguntaba si había alguna posibilidad de hacerlo en PHP sin tener que recurrir a wordwrap(). Y justamente hoy John Resig escribía hoy sobre la posibilidad de cortar automáticamente en palabras de nuestro contenido mediante Javascript.

function wbr(str, num) { 
  return str.replace(RegExp("(\\w{" + num + "})(\\w)", "g"), function(all,text,char){
    return text + "<wbr>" + char;
  });
}

Basandose en los propuestos por Eduardo Lundgren, escribe esta función que nos permite usarla para que nos corte nuestro contenido.

wbr("Hello everyone how are you doing? I'm writing an extravagently long string.", 6);

//Resultado
"Hello everyo<wbr>ne how are you doing? I'm writin<wbr>g an extrav<wbr>agently long string."

Otra solución, basada en Javascript, es la de usar hyphenator, una solución bastante compleja que nos permite realizar cortes en palabras adecuadamente, incluso dependiendo del idioma en el que estemos trabajando, hasta ahora Inglés, Francés y Alemán.

  • Llevo desde tu entrada anterior sobre el tema pensando… y creo que ningun desarrollador web debería pelearse con esto, que la división de palabras debería ser un ‘problema’ solucionado desde el lado del navegador de manera totalmente transparente, ya que es imposible que el desarrollador web sepa como encaja su texto en el maquetado de la página (que puede variar de un usario a otro) y tendría que llenar su código de marcas a diestro y siniestro que no aportan nada al contenido de la página, sólo ‘por si acaso’ o por tener un control que es bastante esquivo en el mundo del HTML.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.