texto salto pestañas pasar parrafos parrafo linea insertar espacio ejemplos alinear html css tabs space pre

salto - ¿Cómo insertar espacios/pestañas en el texto usando HTML/CSS?



salto de linea html (11)

Posibles maneras:

<pre> ... </pre>

o

style="white-space:pre"

¿Algo más?


Espacio en blanco, ¿no podría simplemente usar relleno? Esa es una idea, lo siento, si no estoy haciendo esto correctamente, pero así es como puede agregar un "área en blanco" alrededor de su elemento. Entonces puedes usar las siguientes etiquetas CSS:

padding: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;

Una vez más, lo siento si esto no es lo que estabas buscando.


Esto funcionó para mí: en mi CSS tengo: `

tab0 { position:absolute;left:25px; } tab1 { position:absolute;left:50px; } tab2 { position:absolute;left:75px; } tab3 { position:absolute;left:100px; } tab4 { position:absolute;left:125px; } tab5 { position:absolute;left:150px; } tab6 { position:absolute;left:175px; } tab7 { position:absolute;left:200px; } tab8 { position:absolute;left:225px; } tab9 { position:absolute;left:250px; } tab10 { position:absolute;left:275px; }

luego, en el código HTML solo uso mis pestañas:

Dog Food <tab3> :$30 Milk <tab3> :$3 Pizza Kit <tab3> :$5 Mt Dew <tab3> :$1.75


La respuesta de user8657661 es la más cercana a mis necesidades (de alinear cosas en varias líneas). Sin embargo, no pude conseguir que el código de ejemplo funcionara como se indica, pero necesité cambiarlo de la siguiente manera:

<html> <head> <style> .tab9 {position:absolute;left:150px; } </style> </head> <body> Dog Food: <span class="tab9"> $30</span><br/> Milk of Magnesia:<span class="tab9"> $30</span><br/> Pizza Kit:<span class="tab9"> $5</span><br/> Mt Dew <span class="tab9"> $1.75</span><br/> </body> </html>

Si necesita números alineados a la derecha, puede cambiar a la left:150px a la right:150px , pero deberá modificar el número en función del ancho de la pantalla (según lo escrito, los números serían 150px desde el borde derecho de la pantalla. )


Me gusta usar esto:

En tu CSS:

.tab { display:inline-block; margin-left: 40px; }

En tu HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>


Para insertar tab space entre dos palabras / oraciones que suelo usar

&emsp; y &ensp;


Puedes usar &nbsp; para espacios, &lt; para < (menor que, número de entidad &#60; ) y &gt; para > (mayor que, número de entidad &#62; ).

Se puede encontrar una lista completa en esta dirección: http://www.w3schools.com/html/html_entities.asp


Si está pidiendo pestañas para alinear cosas en algunas líneas, puede usar <table>

poniendo cada línea en <tr> ... </tr>

y cada elemento dentro de esa línea en <td> ... </td>

y, por supuesto, siempre puedes controlar el relleno de cada celda de la tabla para ajustar el espacio entre ellos

esto los alineará y se verán muy bien :)


en casos en que el ancho / alto del espacio está más allá de &nbsp; Usualmente uso

para espaciador horizontal:

<span style="display:inline-block; width: YOURWIDTH;"></span>

para espaciador vertical:

<span style="display:block; height: YOURHEIGHT;"></span>


prueba &emsp;

De acuerdo con los documentos en https://www.w3.org/MarkUp/html3/specialchars.html

Las entidades de personaje &ensp; y &emsp; denotan un espacio en y un espacio em respectivamente, donde un espacio en es la mitad del tamaño del punto y un espacio em es igual al tamaño del punto de la fuente actual. Para las fuentes de tono fijo, el agente de usuario puede tratar el espacio en el espacio como equivalente a un carácter de espacio A, y el espacio de em como equivalente a dos caracteres de espacio.


<span style="padding-left:68px;"></span> también puedes usar padding-left padding-right padding-top padding-bottom


<p style="text-indent: 5em;"> The first line of this paragraph will be indented about five characters, similar to a tabbed indent. </p>

La primera línea de este párrafo tendrá sangría de cinco caracteres, similar a una sangría tabulada

Vea aquí para más información