Truncando cadenas de texto largas con CSS

Image

En el artículo sobre la web p2p y el protocolo dat:// tuve que incluir una cadena alfanumérica realmente larga:

dat://356d355c29f00965ad4504cd238a59bf10464c445ecc99325dda6c2071162f58/

Cuando vi la entrada en mi ordenador no aprecié ningún problema. Pero al visualizarla en el navegador del móvil observé que la cadena sobrepasaba el marco del navegador de esta manera, provocando un indeseado scroll horizontal:

Image

Los navegadores no truncan por defecto las cadenas alfanuméricas muy largas. Y, cuando queremos que nuestra web se visualice bien en pantallas pequeñas, es un problema que solemos encontrarnos (no estoy hablando de la división con guiones, que tiene una solución diferente, sino del truncado de cadenas de texto: URLs por ejemplo).

No hay que preocuparse. Hay un snippet CSS de tamaño mínimo que solventa el problema:

p.truncado {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

Yo lo encontré en este artículo de Michael Scharnagl:

Una vez incluido el truco en el CSS de este blog y aplicado a la cadena, la visualización es la que pretendía:

Image

CSS is awesome!