Como inserir espaços / tabulações no texto usando HTML / CSS

183

Formas possíveis:

<pre> ... </pre>

ou

style="white-space:pre"

Algo mais?

Yeseanul
fonte
Você quer dizer "tags" ou "guias"?
user123444555621
2
Existe um equivalente a &nbsp;mas para fazer uma guia?
Juan Solano
Há nenhum &tab;, mas eu encontrar este pequeno js trecho no github (basicamente localizar e substituir para criar cinco &nbsp;em uma linha) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
dgig

Respostas:

145

Para inserir tab spaceentre duas palavras / frases, eu costumo usar

&emsp; e &ensp;

Giri
fonte
113

Nos casos em que a largura / altura do espaço está além &nbsp;, costumo usar:

Para espaçador horizontal:

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

Para espaçador vertical:

<span style="display:block; height: YOURHEIGHT;"></span>
Japol
fonte
Nota: Certifique-se de especificar a altura ou largura em termos de pixels, ou seja, 10 px.
About7Deaths
57

Você pode usar &nbsp;para espaços, &lt;para <(menor que, número da entidade &#60;) e &gt;para >(maior que, número da entidade &#62;).

Uma lista completa pode ser encontrada em Entidades HTML .

Halim Qarroum
fonte
43

Tente &emsp;.

Conforme a documentação em Caracteres Especiais :

As entidades de caractere &ensp;e &emsp;denotam um espaço en e um espaço em respectivamente, onde um espaço en é metade do tamanho do ponto e um espaço em é igual ao tamanho do ponto da fonte atual. Para fontes de afinação fixa, o agente do usuário pode tratar o espaço en como equivalente a um caractere de espaço A e o espaço em como equivalente a dois caracteres de espaço.

Abhishek Goel
fonte
24

Eu gosto de usar isso:

No seu CSS:

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

No seu HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>
Ivar Harris
fonte
1
Esta é uma boa resposta. Mas eu gostaria de dizer que seria melhor usar a classe CSS em vez do id (significa substituir #tabpor .tabe id="tab"por class="tab") porque se a usarmos mais de uma vez no mesmo documento, podemos ter comportamentos indefinidos. Veja, por exemplo, esta pergunta .
Hilder Vitor Lima Pereira
Isso me ajudou hoje. Muito obrigado.
justnisar
19

Tipos de SpacesHTML

Cria quatro espaços entre o texto &emsp;

Cria dois espaços entre o texto - &ensp;

Cria um espaço regular entre o texto - &nbsp;

cria um espaço estreito (semelhante ao espaço regular, mas com uma pequena diferença - "&thinsp";

espaçamento entre frases - "</br>"

Este link pode ajudá-lo. Confira [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

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

A primeira linha deste parágrafo será recuada com cerca de cinco caracteres, semelhante a um recuo com guias.

Consulte Como usar HTML e CSS para criar guias e espaçamento para obter mais informações.

sammyukavi
fonte
6

<span style="padding-left:68px;"></span>

Você também pode usar:

padding-left
padding-right
padding-top
padding-bottom
Ron1925
fonte
4

Dê um passo além do @Ivar e crie o estilo da minha própria tag personalizada ... Para mim, a 'guia' é mais fácil de lembrar e digitar.

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

E a implementação HTML ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

Captura de tela deste exemplo de código

E a minha captura de tela ...

Dan
fonte
3

Se você está pedindo guias para alinhar as coisas em algumas linhas, pode usar <table>.

Colocando cada linha <tr> ... </tr>. E cada elemento dentro dessa linha <td> ... </td>. E é claro que você sempre pode controlar o preenchimento de cada célula da tabela para ajustar o espaço entre elas.

Isso os alinhará e eles ficarão bem :)

Argento
fonte
3
As tabelas devem ser usadas para representar dados tabulares, não para formatação. Na década de 90, as tabelas eram usadas frequentemente para formatação devido a limitações no HTML e frustrações ao escrever o HTML com estilos que funcionavam consistentemente nos navegadores. Hoje é considerado um anti-padrão.
David Baucum 28/03
Eu vejo o seu ponto, pode haver alguma solução old-school, mas eu tinha o problema de uma vez usando tabelas trabalhou perfeito para mim
Argento
1
Sim, mas você pode usar o estilo de tabela (com CSS moderno) sem alterar o significado semântico! display: table, etc.
Julix 30/05
3

Como alternativa, denominado espaço fixo ou espaço rígido, o NBSP (Non -Breaking Space) é usado na programação e no processamento de texto para criar um espaço em uma linha que não pode ser quebrada pelo quebra de linha.

Com o HTML, &nbsp;permite criar vários espaços visíveis em uma página da web e não apenas no código-fonte.

mastro
fonte
1

Espaço em branco? Você não poderia simplesmente usar estofamento? Essa é uma ideia. É assim que você pode adicionar uma "área em branco" ao redor do seu elemento. Então você pode usar as seguintes tags CSS:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
James Pac
fonte
1

Use o CSS padrão tab-size.

Para inserir um símbolo de tabulação (se tecla de tabulação padrão, mover o cursor), pressione Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

O meu preferido:

*{-moz-tab-size: 1; tab-size: 1;}

Veja o snippet ou o exemplo encontrado rapidamente no tamanho da guia .

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}
<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

MrSwed
fonte
0

Isso funcionou para mim:

No meu CSS eu tenho:

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; }

Então, no HTML, apenas uso minhas guias:

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

A resposta do usuário8657661 está mais próxima das minhas necessidades (de alinhar as coisas por várias linhas). No entanto, não consegui que o código de exemplo funcionasse conforme fornecido, mas precisava alterá-lo da seguinte maneira:

<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>

Se você precisar de números alinhados à direita, poderá alterar left:150pxpara right:150px, mas precisará alterar o número com base na largura da tela (conforme escrito, os números estariam a 150 pixels da borda direita da tela).

Steve McRoberts
fonte
0

Você pode fazer o preenchimento como <span style="padding-left: 20px;">, você pode verificar mais maneiras aqui em - espaço em branco em html

prasoon
fonte
-2

Aqui está o texto "Tab" (copie e cole): ""

Pode parecer diferente ou não uma guia completa devido às limitações de resposta deste site.

James
fonte
1
Eu acho que você precisa formular a resposta mais claramente. Você quer dizer copiar e colar um espaço de algum lugar? Eu não acho que isso funcionaria aqui.
smilyface
1
Há uma TAB na fonte Markdown, mas não na saída HTML aqui (é um espaço único).
Peter Mortensen