Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras

Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras

Por Kseso ✎ 10

Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras Caso: Palabras o cadena de texto de longitud tal que debido al aumento en el número de dispositivos de pantallas reducidas y su uso es imposible predecir si va a tener espacio suficiente para mostrarse en su línea de texto.
Inicialmente o desbordaba su caja de contenido o escondías el sobrante ( overflow ).
Posteriormente se pudo optar por el corte (aleatorio) de la palabra o de la cadena ( word-wrap ), pero sin indicación visual ninguna que indicase que la palabra continuaba en la siguiente línea ( el típico guión: - ) o que había más texto no mostrado ( puntos suspensivos: ... ).

Pues YA PUEDES

word-wrap es una propiedad ya muy, muy veterana y utilizada. Al establecer su valor en break-word se le dice al navegador que divida las palabras donde sea necesario y quiera a fin de evitar el desbordamiento de texto. Lamentablemente por ella sola no se inserta nada que lo indique, dificultando la lectura y su comprensión.

Por no se qué razón, en el último documento sobre el texto del consorcio "CSS Text Level 3" a la propiedad word-wrap la llaman overflow-wrap . A día de hoy no conozco ningún navegador o versión que de soporte a ésta última. Sin embargo con word-wrap podríamos decir que "ninguno" tiene problemas. Pero como su estatus es de borrador, quizás cambie de nuevo cómo la llaman.

Puntos suspensivos automáticos

Mira el texto siguiente, contenido en un párrafo de medidas acortadas, y haz :hover sobre él:

Insertando puntos suspensivos automáticamente con CSS

white-space:nowrap & text-overflow: ellipsis

Las dos declaraciones responsables de la aparición de los puntos suspensivos son white-space:nowrap y text-overflow: ellipsis .

<p class="test"> Insertando puntos suspensivos automáticamente con CSS </p> p.test { white-space:nowrap; width:12em; overflow:hidden; text-overflow: ellipsis; /*otras hornamentales*/ } p.test:hover { text-overflow:inherit; overflow:visible; width: auto; cursor: pointer; }

Guiones al final de la línea en palabras cortadas

Fíjate en los guiones que aparecen en las palabras separadas por no caber en la línea. Mira el código y verás que quien los inserta es el propio css

“Contaba mi abuela Manuela, "queenciertaocasiónunavez", cuando el Egido Nuevo era todavía "unamatademontequequetevoyacontaratí" llegaba "porlomenosalhuertosuyo", "unanochecerradacuandomásbrillabaelsol" de Cabeza Caballo regresaba "eltamborilerodelpueblode" Villasbuenas.
Que por aquello que pasa, entre la raya y el cruce, "pasódeapenasver" por donde iba a no "vernilasorejasdelburro" que lo traía.

Disculpas obligadas por la falta de espacios en blanco para forzar la aparición de los guiones. El html es el siguiente:

<blockquote class="guionesCss"> “Contaba mi abuela Manuela, "queenciertaocasiónunavez", cuando el Egido Nuevo era todavía "unamatademontequequetevoyacontaratí" llegaba "porlomenosalhuertosuyo", "unanochecerradacuandomásbrillabaelsol" de Cabeza Caballo regresaba "eltamborilerodelpueblode" Villasbuenas.<br/> Que por aquello que pasa, entre la raya y el cruce, "pasódeapenasver" por donde iba a no "vernilasorejasdelburro" que lo traía. </blockquote>
hyphens:auto & word-wrap:break-word

La propiedad hyphens "controla si se permite la partición de palabras para crear más oportunidades de ruptura dentro de una línea de texto".
Combinada con word-wrap podemos forzar no sólo que un texto no desborde su caja contenedora sino que las palabras se separen entre líneas e insertando un guión para indicar continua en la siguiente línea:

-moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; -o-hyphens:auto; hyphens:auto; word-wrap:break-word;

Hoy por hoy el soporte depende de las características tanto del navegador/versión utilizado como del idioma. Cada idioma establece unas reglas en las particiones de las palabras.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 10

  1. Excelente información. Muchas gracias por compartirla.

    ResponderEliminar
    Respuestas
    1. A ti, Andrés, por pasar y dejar tu opinión.

      Un saludo

      Eliminar
  2. fernanda garcia15/5/12

    muchas gracias... estaba necesitando esto...

    ResponderEliminar
  3. no me funcionó =(.
    Lo que quiero hacer es que el texto se corte al terminar una palabra (y no corte la palabra) y luego que ponga los puntos suspensivos.
    Saludos, muy buena tu página!
    Marcelo.

    ResponderEliminar
    Respuestas
    1. Sinceramente Marzero0
      Al ser tan escasa la información facilitada ni se que es lo que no le funcionó y mucho menos acierto a comprender qué es lo que desea hacer y no no hace.

      Debería haberse esforzado un poco más en su exposición (obligado adjuntar enlace a su realización para ver códigos) si lo que pretendía era obtener algún tipo de ayuda.

      Un saludo

      Eliminar
    2. Creo que yo adiviné.
      Hay un truco para hacer eso en algunos casos particulares.
      Pero estoy de acuerdo con vos, Kseso; si realmente alguien necesita ayuda debería aportar lo mínimo indispensable para que le respondas.

      No vamos a empezar a malcriar blogueros. ¦-D

      Eliminar
  4. Hola Buenos días. Quisiera hacer un parrafo de texto ( es la bajada de una noticia) que tenga espacio para poner 4 lineas de texto. Lo que necesito es que el texto muestre puntos suspensivos si la cantidad de caracteres supera esas 4 lineas. No se si se entendió.
    Con la propiedad:
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    Los puntos suspensivos aparecen pero solo generando una linea de texto. ¿Es posible hacer un párrafo de 4 lineas y que recién ahi aparezcan los puntos suspensivos??
    Muchas gracias
    Paola

    ResponderEliminar
    Respuestas
    1. Hola Paola
      Supongo que el extracto de cada noticia lo generarás mediante algún lenguaje de programación. Lo suyo sería que uses ese mismo lenguaje para poder contar cuántos caracteres caben en las cuatro líneas (nº) y programes el corte de texto y la adicción de los puntos suspensivos en caso de superar nº-3.

      Css no ofrece una herramienta concreta para controla lo que planteas pero con un poco de imaginación sí puedes simularlo.
      Te dejo este pen como ejemplo
      Verás que funciona en todas las situaciones excepto una: que sean justamente 4 líneas y la 4º no está completa..

      La demo está construida en base a unos valores en ciertas propiedades y con un marcado html que no serán los tuyos porque tú tampoco has hecho caso a lo que siempre pido: ¡códigos!. Así que ahora te tocará a ti adaptar esa demo a tu caso concreto.

      Espero que esa idea te sea de ayuda.

      Un saludo

      Eliminar
    2. ¡Muy bueno! No se me había ocurrido lo de fijar la marca de elipsis a la altura de la cuarta línea.

      Tal parece que Paola no vio cómo resultó el planteo de su vecino de arriba, o hubiese incluído al menos un ejemplo con el formato de su párrafo.

      Aunque estos inventos al final son un desafío, y siempre alguien termina probando si se pueden resolver (de hecho, a nuestro admirador de Magritte se lo resolví y lo publiqué unos meses después, pero como no volvió por acá, ni le avisé).

      Me quedó en la cabeza el detalle de ocultar el pseudo hasta que la última línea de texto se acerque al borde. Bajo ciertas condiciones y de forma muy desprolija, lo conseguí. Te lo iba a enviar en privado pero ya que está publicado el original, lo dejo aquí.

      Multiline text with fake overflow ellipsis in last broken line.

      El contenido es editable para borrar caracteres de la última línea y ver cómo desaparecen los puntos. Aunque el comportamiento real se ve cambiando el código fuente, especialmente para Chrome; los editables no son confiables para tratar ajustes o saltos de línea.

      También lo probé en Firefox; en Opera debe andar y me faltan IExplorer y Safari (además de todos los móviles). No sé para qué equipos estará orientada esa página de noticias.

      (Paola : un último comentario; esto fue suerte, no te acostumbres.)

      Eliminar
  5. Excelente aporte, me hacia falta para ajustar en resoluciones menores.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap