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 en blanco
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada blanco Con sintaxis y ejemplos.
describir
La propiedad de espacio en blanco de CSS define cómo se manejan los espacios en blanco en un elemento.
sintaxis
La sintaxis de la propiedad CSS de espacio en blanco es:
white-space: value;parámetro o parámetro
valor
Determina cómo se manejan los espacios en blanco dentro de un elemento. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| normal | El espacio en blanco está colapsado. Las nuevas líneas se tratan como espacios y se colapsan. Permitir ajuste de texto. p { en blanco: normal; } |
| pre | Dejar en blanco. Las líneas están separadas por saltos de línea. No se permite el ajuste de texto. p { en blanco: antes; } |
| sin empaquetar | El espacio en blanco está colapsado. No hay nuevas líneas. No se permite el ajuste de texto. p {en blanco: ahora rap; } |
| preenvasado | Dejar en blanco. Las líneas están separadas por saltos de línea. Permitir ajuste de texto. p { en blanco: preempacado; } |
| parte delantera | El espacio en blanco está colapsado. Las líneas se separan con saltos de línea y rellenan los cuadros de línea. Permitir ajuste de texto. p { en blanco: línea directa; } |
| heredar | El elemento heredará espacios en blanco de su elemento principal p { en blanco: heredar; } |
notas
- Consulte la propiedad de ajuste de palabras.
- ver
和
元素。
浏览器兼容性
CSS white-space 属性对以下浏览器具有基本支持：
- 铬合金
- 火狐（壁虎）
- 互联网浏览器 (IE)
- 正常：IE 5.5+
- 上一个：IE 6+
- nowrap: IE 6+
- 预包装：IE 8+
- 预行：IE 8+
- 歌剧
- 普通：Opera 4+
- pre: 歌剧 4+
- nowrap: 歌剧 4+
- 预包装：Opera 8+
- 预行：Opera 9.5+
- Safari (WebKit)
例子
我们将在下面讨论 white-space 属性，探索如何在 CSS 中使用此属性的示例。
普通的
让我们看一个将 white-space 属性设置为 normal 的示例。
CSS 看起来像这样：
div { background: lightgreen; width: 325px; }
p { white-space: normal; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>El resultado se verá así:
En este ejemplo de CSS, la propiedad de espacio en blanco se establece en normal. Esto significa que los espacios están contraídos, las nuevas líneas se tratan como espacios y contraídos, y se permite el ajuste de texto.
pre
Ahora veamos qué sucede cuando establecemos la propiedad de espacio en blanco en pre.
CSS se ve así:
div { background: lightgreen; width: 325px; }
p { white-space: pre; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>El resultado se verá así:
En este ejemplo de espacio en blanco de CSS, la propiedad de espacio en blanco se establece en pre. Esto significa que se conservan los espacios en blanco, las líneas nuevas y no se permite el ajuste de texto.
sin empaquetar
Ahora veamos qué sucede cuando establecemos la propiedad de espacio en blanco en nowrap.
CSS se ve así:
div { background: lightgreen; width: 325px; }
p { white-space: nowrap; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>El resultado se verá así:
En este ejemplo de CSS, la propiedad de espacio en blanco se establece en nowrap. Esto significa que los espacios están colapsados, las líneas nuevas están colapsadas y no se permite el ajuste de texto.
preenvasado
Ahora veamos qué sucede cuando establecemos la propiedad de espacio en blanco en ajuste previo.
CSS se ve así:
div { background: lightgreen; width: 325px; }
p { white-space: pre-wrap; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>El resultado se verá así:
En este ejemplo de CSS, la propiedad de espacio en blanco se establece en ajuste previo. Esto significa que se conservan los espacios en blanco, se conservan los saltos de línea y se permite el ajuste de texto.
parte delantera
Ahora veamos qué sucede cuando establecemos la propiedad de espacio en blanco en prelínea.
CSS se ve así:
div { background: lightgreen; width: 325px; }
p { white-space: pre-line; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>El resultado se verá así:
En este ejemplo de CSS, la propiedad de espacio en blanco se establece en línea previa. Esto significa que los espacios se colapsan, las líneas nuevas se conservan y se permite el ajuste de texto.