Manejo de palabras largas y URL (forzar saltos, guiones, puntos suspensivos, etc.) - Trucos CSS

Anonim

Hay ocasiones en las que una cadena de texto muy larga puede desbordar el contenedor de un diseño.

Por ejemplo:

Aquí está la primicia:

  • overflow-wrap: break-word;se asegura de que la cuerda larga se enrolle y no se salga del contenedor. También puede usarlo word-wrapporque, como dice la especificación, son literalmente solo nombres alternativos entre sí. Algunos navegadores admiten uno y no el otro. Firefox (probado v43) solo admite archivos word-wrap. Blink (Chrome v45 probado) tomará cualquiera de los dos.
  • Si está overflow-wrapen uso por sí solo, las palabras se romperán en cualquier lugar que necesiten. Si hay un carácter de "ruptura aceptable" (como un guión literal, por ejemplo), se romperá allí; de lo contrario, simplemente hará lo que debe hacer.
  • También puede usarlo hyphens, porque luego intentará agregar con buen gusto un guión donde se rompa si el navegador lo admite (Blink no lo hace al momento de escribir, Firefox sí).
  • word-break: break-all;es decirle al navegador que está bien romper la palabra donde sea necesario. A pesar de que hace eso de todos modos, no estoy seguro de en qué casos es 100% necesario.

Si desea ser más manual con guiones, puede sugerirlos en su marcado. Vea más en la página de MDN.

Soporte de navegador

Para word-break:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
44 15 5.5 12 9

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 9.0-9.2

Para hypens:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
88 6 * 10 * 12 * 5,1 *

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 4.2-4.3 *

Para overflow-wrap:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
23 49 11 18 6.1

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 4.4 7.0-7.1

Para text-overflow:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
4 7 6 12 3.1

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 2.1 3.2

Prevención del desbordamiento con puntos suspensivos

Otro enfoque a considerar es truncar el texto por completo y agregar puntos suspensivos donde la cadena de texto llega al contenedor:

.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )

Lo bueno de usar text-overflowes que es compatible universalmente.

Ejemplos

Vea las palabras largas con guiones de lápiz mediante CSS-Tricks (@ css-tricks) en CodePen.

Vea las elipses de lápiz por CSS-Tricks (@ css-tricks) en CodePen.

Vea el lápiz para calcular el ajuste de línea de Chris Coyier (@chriscoyier) en CodePen.

Más recursos

  • Michael Scharnagl: Manejo de palabras largas en CSS
  • Kenneth Auchenberg: ajuste de palabras / separación de palabras con CSS
  • MDN: ajuste de palabras, salto de palabras, guiones
  • Espec .: Texto CSS Nivel 3

Para los que se inclinan por SCSS

Estos tienden a ser el tipo de cosas que se agregan al código donde sea necesario, por lo que son buenas @mixins:

@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )
@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )