Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de ajuste de palabra
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada ajuste de línea Con sintaxis y ejemplos.
describir
La propiedad word-wrap de CSS define si el navegador puede envolver una palabra dentro de otra palabra cuando es demasiado larga para caber en su contenedor.
sintaxis
La sintaxis de la propiedad CSS de ajuste de palabra es:
word-wrap: value;parámetro o parámetro
valor
La cantidad de espacio adicional para mostrar entre palabras (además del espaciado estándar de la fuente). Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| separación | Las palabras pueden interrumpirse arbitrariamente cuando son demasiado largas para caber en su contenedor p { ajuste de palabra: salto de palabra; } |
| normal | Solo se permiten puntos de interrupción normales p { ajuste de palabra: normal; } |
notas
- Si la propiedad de ajuste de línea se representa como un valor fijo, puede ser positivo o negativo.
- Los valores positivos agregan espacio extra entre palabras (además del espaciado estándar de la fuente).
- Los valores negativos eliminarán los espacios entre palabras.
- Si la propiedad de ajuste de palabra se establece en normal, la fuente seleccionada determinará el espacio entre palabras.
- Consulte también el atributo overflow y overflow-x.
Compatibilidad del navegador
La propiedad word-wrap de CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Internet Explorer 5.5+ (IE 5.5+)
- Ópera 10.5+
- Safari (WebKit)
ejemplo
Discutiremos la propiedad de ajuste de palabras a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
normal
Veamos un ejemplo de establecer la propiedad de ajuste de palabra en normal.
CSS se ve así:
p { word-wrap: normal; width: 125px; background: lightblue; padding: 5px; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com and contains the word, antidisestablishmentarianism, to demonstrate how to handle word breaking.</p>
</div>El resultado se verá así:
En este ejemplo de ajuste de línea de CSS, los saltos de línea solo se insertan en los puntos de separación de palabras normales. Entonces, si una palabra es demasiado larga para caber en su contenedor, se desbordará. Como veis, la palabra antidesestablecimiento es tan larga que parte de ella desborda el recipiente.
separación
Ahora veamos qué sucede cuando usamos el mismo ejemplo y establecemos la propiedad word-wrap en break-word.
CSS se ve así:
p { word-wrap: break-word; width: 125px; background: lightblue; padding: 5px; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com and contains the word, antidisestablishmentarianism, to demonstrate how to handle word breaking.</p>
</div>El resultado se verá así:
En este ejemplo de ajuste de palabras de CSS, el navegador puede dividir arbitrariamente las palabras cuando son demasiado largas para caber en su contenedor. Entonces, en el ejemplo de la palabra antidesestablecimiento, se inserta una nueva línea entre “antidesestablecerme” y “ntaranismo” en lugar de desbordar el contenedor.