La propiedad de puntuación colgante en CSS proporciona a los diseñadores web una ventaja sobre la tipografía en la página web. La propiedad de puntuación colgante especifica si se coloca un signo de puntuación fuera del cuadro de línea al principio o al final de alguna línea de texto. Básicamente, proporciona a los diseñadores web establecer viñetas o cualquier símbolo en la alineación específica, ya sea a la izquierda o a la derecha, de modo que la primera letra esté correctamente alineada con el resto del documento. Podemos usar las siguientes palabras clave junto con la propiedad de puntuación colgante y podemos usarlas en diferentes modos o tipos:
- Valores de palabras clave
- Dos valores de palabra clave
- Tres valores de palabra clave
- Valores de palabras clave globales
- Sintaxis: para valores de palabras clave
ohanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end;
- Sintaxis: para dos valores de palabra clave
hanging-punctuation: first force-end; hanging-punctuation: first allow-end; hanging-punctuation: first last; hanging-punctuation: last force-end; hanging-punctuation: last allow-end;
- Sintaxis: para tres valores de palabras clave
hanging-punctuation: first force-end last; hanging-punctuation: first allow-end last;
- Sintaxis: para valores globales
hanging-punctuation: inherit; hanging-punctuation: initial; hanging-punctuation: unset;
Valor por defecto:
- ninguna
Valores de propiedad:
| Palabra clave | Funcionalidad |
|---|---|
| ninguna | Este es el valor predeterminado para esta propiedad. Ningún personaje se cuelga. |
| primero | Se bloquea el uso de un carácter disponible al comienzo de la primera línea formateada de un elemento. |
| ultimo | Se cuelga un carácter disponible al final de la última línea formateada de un elemento. |
| forzar el fin | El uso de parada o coma al final de una línea se cuelga. |
| permitir-finalizar | Un punto o coma al final de una línea cuelga si no encaja antes de la justificación. |
Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>
CSS Hanging Punctuation Property
</title>
<style>
p {
hanging-punctuation: first;
}
</style>
</head>
<body>
<p>“GeeksforGeeks: A computer science portal”</p>
</body>
</html>
Producción :
Navegador compatible: los navegadores compatibles con la propiedad de puntuación colgante se enumeran a continuación:
- Safari 10.0+
Publicación traducida automáticamente
Artículo escrito por motamarriphani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA