Inicia sesión




Como prevenir que una palabra se salga de su contenedor

Como prevenir que una palabra se salga de su contenedorSi tenemos una palabra muy larga puede pasar que ocupe más ancho que su contenedor y que no se pueda leer o, en el mejor de los casos, rompa el layout de nuestra web. Este problema puede provocar más de un calentamiento de cabeza, especialmente en diseños adaptativos cuándo se ven en pantallas pequeñas y se está utilizando un tamaño de fuente grande.

La solución rápida sería utilizar word-break: break-all:
.break-word {
     word-break: break-all;
}
Sin embargo, hay otra solución que ofrece una mejor experiencia de lectura: añadir el guión ortográfico al final del renglón cuándo una palabra se corta para indicar que la palabra continúa en el renglón siguiente. Esto se consigue con la regla CSS hyphens: auto (CSS3):
.break-word {
     hyphens: auto;
}
Para conseguir la máxima compatibilidad con diferentes navegadores se debe combinar hyphens y word-break. De este modo los navegadores que no soportan hyphens seguirán rompiendo la palabra aunque sea sin guión.
.break-word {
 -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
}
Hyphens, combinado con text-align: justify nos valdría para justificar texto al estilo «periódico»:

Importante


Para que la propiedad hyphens: auto funcione, el elemento en el que se aplica tiene que tener definido el atributo lang. Esto es debido a que el guión separador (hyphen) se introduce después de determinados caracteres que dependen de cada idioma; si el idioma no ha sido establecido el navegador suele ignorar la propiedad hyphens: auto.

El atributo lang es hereditario, por lo que no es necesario definirlo en cada elemento. Generalmente una página web tiene el atributo lang definido en la etiqueta <html> y se hereda al resto del documento, por lo que no suele haber ningún problema con la propiedad hyphens: auto pero si notas que no funciona como esperas, comprueba que esté definido el atributo lang.

También se pueden introducir manualmente los caracteres que señalan la posición dónde se insertará el guión separador si es necesario o definirlos a través de reglas CSS. Hacerlo se queda fuera del propósito de este post pero si estás interesado puedes ver una explicación bastante completa en hyphens – CSS Reference.

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-04
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial

Como prevenir que una palabra se salga de su contenedor
Como prevenir que una palabra se salga de su contenedor Como prevenir que una palabra se salga de su contenedor...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






No pierdas tiempo con las web de Pago por clic

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-06
  • Categorias: PTC WebSite Internet Trucos y tips Noticias Tutorial

¿Por qué no eres un famoso diseñador gráfico?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-05
  • Categorias: Cursos Noticias Tutorial

Como descargar videos de YouTube, Instagram, Facebook y Twitter

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-04
  • Categorias: YouTube Audio Video Redes Sociales Facebook Twitter Instagram WebSite Noticias Tutorial

¿Por qué no eres un famoso diseñador gráfico?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-05
  • Categorias: Cursos Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial