historia - html pdf
¿Espacio de tabulación en lugar de múltiples espacios sin ruptura(“nbsp”)? (30)
& 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 textos, por ejemplo, Word, Wordperfect, Open Office, Wordworth, etc. Son de ancho fijo y no se pueden personalizar.
CSS le brinda un mayor control y brinda 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 juego de caracteres que quieras usar.
Puede configurar algunas etiquetas de pestaña y usarlas de manera 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 usarlos como tal:
<!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>
Ejecute el fragmento de arriba para ver un ejemplo visual.
Discusión extra
No hay entidades de tabulación horizontal definidas en el código ISO-8859-1 HTML, sin embargo, hay algunos otros caracteres de espacio en blanco disponibles que los habituales   , por ejemplo;   ,   y lo anterior   .
También vale la pena mencionar que en ASCII y Unicode, 	 Es una tabulación horizontal.
¿Es posible insertar un carácter de tabulación en HTML en lugar de tener que escribir ¿cuatro veces?
A continuación se muestran las 3 formas diferentes proporcionadas por HTML para insertar un espacio vacío
- Escriba
para añadir un solo espacio. - Escriba
 Para añadir 2 espacios. - Escriba
 Para sumar 4 espacios.
AFAIK, la única forma es usar
Si puede usar CSS, entonces puede usar relleno o margen. Ver Modelo de caja , y para Internet Explorer, también lea el error del modelo de caja de Internet Explorer .
Bueno, si uno necesita un espacio en blanco largo al principio de una línea solo de todo el párrafo, entonces esto puede ser una solución:
<span style=''display:inline-block;height:1em;width:4em;''> </span>
Si eso es demasiado para escribir o uno necesita estas pestañas en muchos lugares, entonces puede hacer esto
<span class=''tab''> </span>
Luego incluye esto en CSS:
span.tab {display:inline-block;height:1em;width:4em;}
Depende del juego de caracteres que quieras usar.
No hay una entidad de pestaña definida en ISO-8859-1 HTML, pero hay un par de caracteres de espacio en blanco que no son tales como   ,   , y   .
En ASCII, 	 Es una pestaña.
Here hay una lista completa de las entidades HTML y una discusión útil sobre los espacios en blanco en Wikipedia .
El código CSS ideal que se debe usar debe ser una combinación de las propiedades "display" y "min-width" ...
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.
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 lo necesitaba:
<span class="tab"></span>
Guarda de la cantidad de o   que necesitarías
Espero que esto ayude a alguien, salud!
Es mejor usar la etiqueta pre . La etiqueta pre define el texto preformateado.
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
saber más sobre la etiqueta pre en este enlace
Es mucho más limpio usar CSS. Pruebe con el padding-left:5em o margin-left:5em según corresponda.
Esta es una solución un poco fea, pero puedes hacer esto
var tab = '' '';
Y luego usa la variable tab en tus cadenas.
Esta no es una respuesta directa, pero quería agregar una pestaña en el documento de Markdown. Estaba dibujando un gráfico de objetos como este:
--Parent
|
+ Child 1
Por supuesto, la forma fácil de marcarlo como código es sangrar con 4 espacios y luego se trata como código en Markdown.
--Parent
|
+ Child 1
He utilizado un lapso con el estilo en línea. He tenido que hacer esto mientras procesaba una cadena de texto sin formato y necesito reemplazar / t con 4 espacios (appx). No pude usar a medida que avanzaban en el proceso, se estaban interpretando de modo que el recargo final tuviera espacios sin contenido.
HTML:
<span style="padding: 0 40px"> </span>
Lo usé en una función php como esta:
$message = preg_replace(''//t/'', ''<span style="padding: 0 40px"> </span>'', $message);
La etiqueta <tab> nunca llegó a los navegadores, a pesar de haber sido introducida en HTML3. Siempre he pensado que es una verdadera lástima porque la vida sería mucho más fácil en muchas circunstancias si la tuviéramos a nuestra disposición. Pero puede remediarlo fácilmente para darle una etiqueta falsa <tab>. Agregue lo siguiente en el encabezado de su HTML o bien (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 deambular con entidades de caracteres torpes o tramos. Facilita la verificación de su fuente y la facilidad para dar formato a cosas sencillas donde no desea ir a la molestia de las tablas u otras "soluciones" más complejas.
Un aspecto interesante 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 grupo de TAB de posición absoluta verdadera, luego usar la pestaña apropiada (por ejemplo, <tab2> o <tab5> o lo que sea) donde sea necesario, pero no he encontrado una manera de hacer eso sin sangrar las líneas subsiguientes .
No, la pestaña es solo espacios en blanco en lo que respecta a HTML. Recomendaría un em-space que es tan grande (-> <-) y se   como   . Incluso puede ser capaz de salirse con la suya utilizando el carácter Unicode para ello si tiene suerte.
Puede usar una tabla y aplicar un atributo de width al primer <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
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 usas CSS están perdiendo el punto. Es posible que no siempre intente sangrar un párrafo desde un lado, sino que, de hecho, intente colocar espacios adicionales en un lugar en particular.
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 imponer la separación de estilo y regla de contenido (HTML se diseñó para hacer ambas cosas desde el principio; no hay nada de malo en definir de vez en cuando el estilo de un elemento único usando etiquetas apropiadas sin tener que gastar mucho más tiempo para 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 espacio en blanco como usados solo para Estilo y sangría.
Y cuando no hay una forma elegante de insertar espacios sin tener que confiar en   y etiquetas, diría que el código resultante se vuelve mucho más ilegible que si hubiera una etiqueta con el nombre adecuado que le hubiera permitido insertar rápidamente una gran cantidad de espacios (o si, sabes, los espacios no se consumieron innecesariamente en la primera lugar).
Sin embargo, como se dijo anteriormente, lo mejor sería usar   Para insertar en el lugar correcto.
Sólo la etiqueta "pre":
<pre>Name: Waleed Hasees
Age: 33y
Address: Palestine / Jein</pre>
Puedes aplicar cualquier clase de CSS en esta etiqueta.
Si desea sangrar la primera oración de un párrafo, puede hacerlo con un pequeño truco de CSS:
p:first-letter {
margin-left: 5em;
}
Si el espacio en blanco se vuelve tan importante, puede ser mejor usar texto con formato previo y la etiqueta <pre>.
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.
Si solo necesitabas una pestaña, lo 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>
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>
También puedes usar:
p::before {
content: "";
padding-left: 30px;
}
Y reemplace "p" con cualquier otro selector que tenga en mente.
Usando CSS y las mejores prácticas, la creación dinámica de menús anidados y con sangría sería la siguiente:
- Cree un estilo para cada anidación, como indent1, indent2, etc., cada uno especificando su propio margen izquierdo. La estructura del sitio rara vez debe ir más allá de tres niveles de anidación.
- Use una variable estática (entero) dentro de la función auto-recursiva para rastrear la recursión.
- Para cada bucle, agregue el número de bucle a la palabra
indent, utilizando scripts 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 utilizando múltiples o etiquetas <pre> , u otros caracteres, según corresponda.
De probar el carácter de tabulación horizontal, 	 Descubrí que no funciona como reemplazo de varios En el escenario que describí. Puede tener diferentes resultados.
Utilizo una lista sin viñetas para dar el aspecto "tabulado". (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 usar 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 utilizando listas anidadas.
Un noob aquí hablando, así que si hay algún error, por favor comente.
  ,   ,   o   puede ser usado.
W3 dice ...
The character entities   and   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.
Aún más en Wikipedia
Probar  
Es equivalente a cuatro s.
<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 agrega tu texto después de <t>. </ T>
El período se utiliza como portador de espacio y es más fácil de escribir, pero el ''& # 160;'' se puede utilizar en lugar del período, lo que hace que el código de colores sea irrelativo.
<head>
<style> t {letter-spacing:35px;} </style>
</head>
<t> </t>
Esto es útil sobre todo para mostrar párrafos de texto, aunque puede ser útil en otras partes de los scripts.
<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 dar por CSS.