¿Espacio de tabulación en lugar de múltiples espacios que no se rompen ("nbsp")?

959

¿Es posible insertar un carácter de tabulación en HTML en lugar de tener que escribir  cuatro veces?

html Roch
fuente
21
Me resulta útil usar <PRE> cuando se usa el tiempo de tabulación múltiple al comienzo de la línea (por instencia al escribir código C)
Guy Kovel
Un TABpersonaje ... ¿para hacer qué?
Michel de Ruiter el
puede definir su propia etiqueta <tab>, luego usar jQuery en la readyfunción para reemplazarlos o rellenarlos con el número deseado de espacios equivalentes.
Khaled.K
Si realmente necesita pestañas, intentewhite-space
Buksy
66
FYI: si un 4x estático &nbsp;(o uno simple &emsp;) no lo corta y desea que se alineen con la siguiente columna "4 espaciados", como podría hacer una pestaña, (lo que significaría que a veces es realmente 0 o 1 o 2 o 3 espacios para alinear) ... como por ejemplo ... en, por ejemplo, algunos editores de texto ... Desafortunadamente, no puedes en HTML ... sin <table>s ... y también, usando cierta cantidad de espacios para intentar hackearlo ... requerirá una fuente fija ... Creo que la mayoría de los problemas radican entre la necesidad de una fuente fija y que a HTML le encanta eliminar espacios en blanco.
Pimp Trizkit

Respuestas:

583

Es mucho más limpio usar CSS. Intente padding-left:5emo margin-left:5emsegún corresponda en su lugar.

Alohci
fuente
13
El relleno de @Alohci IMHO con CSS no es tan bueno ya que cuando acercará el texto en el navegador, el tamaño del texto aumentará pero no el relleno AFAIK.
AlexV
16
@AlexV: si usa emcomo dimensión, como lo hice, debería expandirse con el tamaño del texto. Incluso si no lo hace, dependerá de la naturaleza del mecanismo de zoom utilizado.
Alohci
2
@DavidThielen - HTML 3, en el que apareció el elemento TAB no fue un iniciador con los fabricantes de navegadores, y el elemento TAB nunca se implementó. En cambio, se creó HTML 3.2, que era algo más simple y se implementó en su lugar.
Alohci
2
@Eoin, de hecho. Es decir, lo que realmente quiere en esos casos son tabulación paradas . Pero eso no era lo que preguntaba el OP. El OP estaba pidiendo un reemplazo para múltiples espacios secuenciales que no se rompen, lo que tampoco alinearía las filas. CSS tiene una tab-sizepropiedad que es lo que realmente quieres, pero su soporte de navegador ha sido errático. De lo contrario, el diseño de la mesa o quizás flexbox son sus mejores apuestas.
Alohci
55
Esto no responde la pregunta. la respuesta a continuación por Kristian aborda el problema sobre el que el usuario publicó
Pranavan Maru
1265

Depende del conjunto de caracteres que desee usar.

No hay ninguna entidad pestaña se define en la norma ISO-8859-1 HTML - pero hay un par de espacios en blanco que no sea &nbsp;como &thinsp;, &ensp;, y &emsp;.

En ASCII, &#09;es una pestaña.

Aquí hay una lista completa de entidades HTML y una discusión útil sobre espacios en blanco en Wikipedia .

kristian
fuente
2
¿Qué diferencia hay entre &ensp;y &emsp;? Lo probé, ¡ambos tienen exactamente el mismo espacio ...!
Shafizadeh
3
La salsa secreta para hacer & # 09; aparecer como un espacio con pestañas en HTML es la definición CSS de espacio en blanco. <p style = "display: inline-block; white-space: pre-wrap;"> & # 09; ¡Muy bien! Tabbing me funciona en español e inglés </p>. espacio en blanco: pre; También funciona. También puede usar una etiqueta "tab" <tab /> junto con CSS :: before Selector tab :: before {content: "\ 0009";} pero no aparece como una pestaña al resaltar, cortar y pegar .
Jules Bartow
3
@Shafizadeh De las especificaciones de W3 : un espacio en es la mitad del tamaño en puntos y un espacio en em es igual al tamaño en puntos de la fuente actual. &emsp;Es un poco más grande. Puedo ver la diferencia en Chrome 64 y FireFox 58.
Dmitry
Estaba buscando esto cuando construía una consulta concat () grande en MySQL para usar en un Crystal Report. ¡el ASCII (& # 09;) hizo el trabajo perfectamente!
Mike D Wakelyn
Esto es lo que estaba buscando. He espaciado algunos títulos usando el atributo justify de la última línea, pero no quiero que algunos se separen. El & ensp; prevenido eso.
Alex Banman el
195

& emsp; es la respuesta.

Sin embargo, no serán tan funcionales como cabría esperar si está acostumbrado a usar tabulaciones horizontales en procesadores de texto, por ejemplo, Word, Wordperfect, Open Office, Wordworth, etc. Son de ancho fijo y no se pueden personalizar.

CSS le brinda un control mucho mayor y ofrece una alternativa hasta que el W3C proporcione una solución oficial.

Ejemplo:

padding-left:4em

..o..

margin-left:4em

..según sea apropiado

Depende del conjunto de caracteres que desee usar.

Puede configurar algunas etiquetas de pestaña y usarlas de forma similar a como usaría las etiquetas h.

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... y úsalos así:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>
Expandir fragmento

Ejecute el fragmento de arriba para ver un ejemplo visual.

Discusión extra

No hay entidades de tabulación horizontal definidas en HTML ISO-8859-1, sin embargo, hay algunos otros caracteres de espacio en blanco disponibles que los habituales &nbsp, por ejemplo; &thinsp;, &ensp;y lo anterior &emsp;.

También vale la pena mencionar que en ASCII y Unicode, &#09;es una tabulación horizontal.

WonderWorker
fuente
2
Esto no es válido de XHTMLacuerdo con el validador W3
Buksy
Eso es solo cierto a medias, ya que & emsp; es verdadero marcado W3C válido. Pero se está refiriendo claramente al ejemplo favorable de CSS. En este caso, estamos utilizando etiquetas personalizadas, que son nuevas marcas y no forman parte del conjunto W3C. El validador W3C es estricto al grado de marcar siempre las etiquetas personalizadas como errores. Depende de usted lo que es más importante. Ya es hora de que tengamos una implementación oficial decente de pestañas agregadas al conjunto de marcado Html. Espero que esto ayude.
WonderWorker
2
Usé esto en un caso para encabezados Swing JTable con un valor de cadena y un carácter de tipo de flecha HTML, donde necesitaba este carácter como separador. ¡Funciona genial! ¡Gracias!
Blake Neal
2
"Curiosamente, no hay una pestaña horizontal en html" No es tan extraño ya que el formato se ha alejado constantemente de html a css, y una pestaña no es un elemento visual, solo un elemento de formato, sino una buena respuesta y bien explicada
MikeT
75

A continuación se muestran las 3 formas diferentes que proporciona HTML para insertar espacios vacíos

  1. Escriba &nbsp;para agregar un solo espacio.
  2. Escriba &ensp;para agregar 2 espacios.
  3. Escriba &emsp;para agregar 4 espacios.
sanjeev51
fuente
3
Solo agrégueles ;a ellos también. Me gusta&nbsp;
Amio.io
2
Esta respuesta en realidad responde a la pregunta. Es estúpido cómo se marca una respuesta CSS como respuesta.
Mani
@Mani La pregunta se hizo en 2009 y la respuesta aceptada es de 2009. Esta respuesta se agregó en 2018 .. Cuando lo miras de esa manera, no es estúpido.
ᴛʜᴇᴘᴀᴛᴇʟ
@ ᴛʜᴇᴘᴀᴛᴇʟ Olvidar si esto realmente responde la pregunta o no, pero el marcado no responde con precisión es el punto que estoy tratando de hacer.
Mani
Esta es la respuesta correcta real. ¡Gracias!
Ariel Mónaco
67

Tratar &emsp;

Es equivalente a cuatro &nbsp;s.

Abhishek Goel
fuente
De hecho, no es la respuesta correcta como w3.org/MarkUp/html3/specialchars.html . dice claramente que depende del tipo de fuente utilizada, también el espacio em es igual al tamaño en puntos de la fuente actual, y el espacio em es equivalente a dos caracteres de espacio
le0diaz
52

Realmente no hay una manera fácil de insertar múltiples espacios dentro (o en el medio) de un párrafo. Aquellos que sugieren que use CSS están perdiendo el punto. Es posible que no siempre esté tratando de sangrar un párrafo desde un lado pero, de hecho, está tratando de poner espacios adicionales en un lugar particular del mismo.

En esencia, en este caso, los espacios se convierten en el contenido y no en el estilo. No sé por qué tanta gente no ve eso. Supongo que la rigidez con la que intentan forzar la separación de la regla de estilo y contenido (HTML fue diseñado para hacer ambas cosas desde el principio; no hay nada de malo en definir ocasionalmente el estilo de un elemento único usando etiquetas apropiadas sin tener que gastar mucho más) tiempo en crear hojas de estilo CSS y no hay absolutamente nada ilegible cuando se usa con moderación. También hay algo que decir para poder hacer algo rápidamente.) se traduce en cómo solo pueden considerar los caracteres de espacios en blanco como utilizados solo para Estilo e indentación.

Y cuando no hay una forma elegante de insertar espacios sin tener que depender &emsp;y &nbsp;etiquetas, yo diría que el código resultante se convierte en mucho más unreadible que si había una etiqueta apropiado nombre que le han permitido a la rápida inserción de un gran número de espacios (o si, ya sabes, los espacios no se consumieron innecesariamente en primer lugar).

Sin embargo, como se dijo anteriormente, su mejor opción sería utilizar &emsp;para insertar en el lugar correcto.

GonzoKnight
fuente
1
HTML no fue diseñado desde el principio para tener un estilo personalizado.
Markus Unterwaditzer
¡Me encanta tu punto de vista sobre cómo la sangría no siempre es lo que la gente quiere!
Programas Redwolf
46

Es mejor usar la etiqueta previa . La etiqueta previa define texto preformateado.

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

Conozca más sobre la etiqueta previa en este enlace

Srikanth Muttavarapu
fuente
1
@HuzaifaSaifuddin, ¿qué quieres decir? <pre>está estandarizado en HTML5 con el mismo comportamiento que en HTML4.
Sumit
Lo siento, no sé Y escribí eso ... Estoy de acuerdo con lo que dices ... Lo siento por información incorrecta
Huzaifa Saifuddin
Estaba formateando la salida para pegarla en hojas de cálculo, y esto me permitió insertar \ t caracteres para hacer tabulación. Definitivamente fue mi respuesta. Buen curso.
Craig Brett
1
Esta es la mejor opción en mi humilde opinión. Además, podemos aplicar una definición de estilo en <pre>, para que podamos tener la fuente correcta 'monoespacio' si es necesario. Ejemplo: pre {font-family: "Lucida Console", Mónaco, monoespacio; tamaño de fuente: 90%; }
reverpie
41

Encontré esto mientras buscaba un método y terminé descubriendo el mío que parece funcionar fácilmente para lo que se busca. Soy nuevo en publicar aquí, así que espero que esto funcione ... Pero tenga esto en CSS:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

Luego, en su HTML, haga que esta sea su "pestaña larga" en la mitad de la oración como necesitaba:

<span class="tab"></span>

Ahorro de la cantidad de &nbsp;o &emsp;que necesitarías.

Espero que esto ayude a alguien, ¡salud!

Robar
fuente
3
Esto agregará 80 píxeles a la izquierda y 80 píxeles a la derecha de la spanetiqueta, no exactamente una pestaña.
mcont
Sigue siendo una respuesta inteligente, ya que solo está agregando un poco de marcado mientras permite que CSS haga el estilo.
Invot
19

&emsp;, &ensp;, &#8195;O &#8194;puede ser utilizado.

W3 dice ... 

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

Leer más en W3.org para HTML3

Lea más en W3.org para HTML4

Aún más en Wikipedia

shyammakwana.me
fuente
9

Si el espacio en blanco se vuelve tan importante, puede ser mejor usar texto preformateado y la etiqueta <pre>.

pavium
fuente
El OP no es tan particular sobre los espacios en blanco, solo se le preguntó sobre los accesos directos para múltiples &nbsp;. Invocar la <pre>etiqueta creará mucho trabajo extra.
isomorphismes
Para evitar la fuente monospace, use css "white-space: pre-wrap"
hultqvist
El espacio en blanco no es una that importantcosa. Es un hecho de la vida.
Programas Redwolf
9

Si solo busca sangrar la primera oración de un párrafo, puede hacerlo con un pequeño truco CSS:

p:first-letter {
    margin-left: 5em;
}
peirix
fuente
Si. Eso también funcionará. Solo recuerde ponerlo :first-lettersi el punto es sangrar solo la primera oración.
peirix
9

La etiqueta <tab> nunca llegó a los navegadores, a pesar de haberse introducido en HTML3. Siempre he pensado que es una verdadera pena porque la vida sería mucho más fácil en muchas circunstancias si la tuviéramos disponible. Pero puede remediar esto fácilmente para darle una etiqueta <tab> falsa. Agregue lo siguiente en el encabezado de su HTML o de lo contrario (sin las etiquetas de estilo) en su CSS:

<style>
    tab { padding-left: 4em; }
</style>

A partir de entonces, cuando necesite una pestaña en su documento, coloque <tab> allí. No es una pestaña verdadera porque no se alinea con las marcas de tabulación, pero funciona para la mayoría de las necesidades, sin tener que tambalearse con entidades de caracteres o tramos torpes. Hace que sea muy fácil verificar su fuente, y es muy fácil formatear cosas simples donde no desea ir a la molestia de las tablas u otras "soluciones" más complejas.

Un buen aspecto de esta solución es que puede hacer una búsqueda / reemplazo rápido de un documento de texto para reemplazar todos los TAB con la etiqueta <tab>.

Es posible que pueda definir un montón de TAB de posición absoluta verdadera, luego use la pestaña apropiada (por ejemplo, <tab2> o <tab5> o lo que sea) donde sea necesario, pero no he encontrado la manera de hacerlo sin sangrar las líneas posteriores .

usuario1388236
fuente
7

Puede usar una tabla y aplicar un widthatributo al primero <td>.

Código:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

Resultado

Content1       Content2
Content3       Content4
mangkokorix
fuente
¡¡Gracias!! Esta es la mejor y más general solución para situaciones donde CSS no es posible.
John Henckel
6

He usado un lapso con estilo en línea. Tuve que hacer esto mientras procesaba una cadena de texto sin formato y necesito reemplazar el \ t con 4 espacios (appx). No pude usarlos &nbsp;más adelante en el proceso que estaban siendo interpretados para que el marcado final tuviera espacios sin contenido.

HTML:

<span style="padding: 0 40px">&nbsp;</span>

Lo usé en una función php como esta:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);
Gordy
fuente
6

Si solo necesitabas una pestaña, la siguiente funcionó para mí.

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

con el HTML algo como:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

Puede agregar más "pestañas" agregando estilos de "pestañas" adicionales y cambiando el HTML como:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

con el HTML algo como:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>
StrangeDucks
fuente
4

Si está utilizando CSS, sugeriría lo siguiente:

p:first-letter { text-indent:1em; }

Esto sangrará la primera línea como en las publicaciones tradicionales.

Slevin
fuente
4

Hay un simple CSS para ello:

white-space: pre;

Mantiene los espacios que agrega en el HTML en lugar de unificarlos.

Avi
fuente
3 
<span style="margin-left:64px"></span>

Considérelo así: una pestaña es igual a 64 píxeles. Así que este es el espacio que podemos brindar mediante CSS.

Mateen
fuente
3

podemos usar style = "white-space: pre" de esta manera:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

el espacio en blanco en el interior está lleno de pestañas, la cantidad de pestañas depende del texto.

se verá así:

Text    : value
Text2   : value2
Text32  : value32
Esgi Dendyanri
fuente
3

El código CSS ideal que debe usarse debe ser una combinación de propiedades de "visualización" y "ancho mínimo" ...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.
Olumida
fuente
2

Bueno, si uno necesita un espacio en blanco largo al comienzo de una línea solo del párrafo completo, entonces esta puede ser una solución:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

Si eso es demasiado para escribir o uno necesita tales pestañas en muchos lugares, entonces puede hacerlo

<span class='tab'>&nbsp;</span>

Luego incluye esto en CSS:

span.tab {display:inline-block;height:1em;width:4em;}
Evgeny Savelev
fuente
2

Uso una lista sin viñetas para dar la apariencia de "pestañas". (Es lo que a veces hago cuando uso MS Word)

En el archivo CSS:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

Y en el archivo HTML use listas desordenadas:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

La belleza de esta solución es que puede hacer más sangrías usando listas anidadas.

Un novato aquí hablando, así que si hay algún error, por favor comente.

funct7
fuente
(x) HTML debe especificar el contenido del documento, y CSS debe manejar cómo se muestra. Hay razones por las que el diseño de páginas web usando tablas nunca debe usarse para datos no tabulares.
Nielsvh
1

utilizamos clase de espacio personalizado

<span class='space'></span>

Incluir clase de espacio en CSS.

.space 
{
   margin-left:45px;
}
rashedcs
fuente
1
Como en la respuesta de Alohci, utilice em/ remmedidas, para permitir el zoom del texto del navegador.
Charlie Harding
0

Usando CSS y las mejores prácticas, la creación dinámica de menús anidados y sangrados sería la siguiente:

  1. Cree un estilo para cada anidamiento, como sangría1, sangría2, etc., especificando cada uno su propio margen izquierdo. La estructura del sitio rara vez debe ir más allá de los tres niveles de anidación.
  2. Use una variable estática (entero) dentro de la función autorrecurrente para rastrear la recursividad.
  3. Para cada bucle, agregue el número de bucle a la palabra indent, utilizando secuencias de comandos del lado del servidor como PHP o ASP, de modo que estos menús estén formateados adecuadamente por CSS.

Alternativamente, recorra la variable estática para agregar espaciado usando múltiples &nbsp;o<pre> etiquetas, u otros caracteres, según sea apropiado.

Al probar el carácter de tabulación horizontal, &#09;descubrí que no funciona como reemplazo de múltiples &nbsp;en el escenario que describí. Es posible que tenga resultados diferentes.

Ro Mc
fuente
0

Esta es una solución un poco fea, pero podrías hacer esto

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

Y luego use la variable de tabulación en sus cadenas.

Aonghus McGovern
fuente
0

Solo etiqueta "pre":

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

Puede aplicar cualquier clase de CSS en esta etiqueta.

Yanni
fuente
0

Simplemente recomendaría:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>
yoav barnea
fuente
0 
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Asegúrese de que el código de color coincida con el fondo, el px es variable a la longitud deseada para la pestaña.

Luego agregue su texto después de <t>. </ T>

El punto se usa como espacio y es más fácil de escribir, pero el '& # 160;' se puede usar en lugar del período, lo que hace que la codificación de color sea irrelativa.

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

Esto es útil principalmente para mostrar párrafos de texto, aunque puede ser útil en otras partes de los scripts.

Eric A. Tuttle
fuente