Espaço de tabulação em vez de vários espaços sem quebra ("nbsp")?

959

É possível inserir um caractere de tabulação em HTML em vez de precisar digitar  quatro vezes?

html 
— Roch
fonte
21
Acho que é prestável para uso <PRE> quando usando o tempo guia mulple no início da linha (para instence quando qouting código C)
— Guy Kovel
Um TABpersonagem ... para fazer o que?
— Michel de Ruiter
você pode definir sua própria tag <tab>e usar a função jQuery on readypara substituí-las ou preenchê-las com o número desejado de espaços equivalentes.
— Khaled.K
Se você realmente precisa de abas, dar uma chance parawhite-space
— Buksy
6
Para sua informação, se um 4x estático &nbsp;(ou um único &emsp;) não o estiver cortando e você desejar alinhar-se à próxima coluna "4 espaçados", como uma guia pode fazer (o que significaria às vezes 0 ou 1 ou 2 ou 3 espaços para alinhar) .. como por exemplo .. digamos, alguns editores de texto .. Infelizmente, você não pode em HTML ... sem <table>s ... e também, usando uma certa quantidade de espaços para tentar hackear ... exigirá uma fonte fixa .... Acho que a maioria dos problemas está entre a necessidade de uma fonte fixa e o HTML adora remover o espaço em branco.
— Pimp Trizkit

Respostas:

582

É muito mais limpo usar CSS. Tente padding-left:5emou margin-left:5emconforme apropriado.

— Alohci
fonte
13
O preenchimento IMHO @Alohci com CSS não é tão bom, pois quando você ampliar o texto no navegador, o tamanho do texto aumentará, mas não o preenchimento AFAIK.
— AlexV
16
@AlexV - Se você usa emcomo dimensão, como eu fiz, ele deve se expandir com o tamanho do texto. Mesmo se não o fizer, isso dependerá da natureza do mecanismo de zoom usado.
— Alohci
2
@DavidThielen - HTML 3, no qual o elemento TAB apareceu não era um iniciador para os fabricantes de navegadores, e o elemento TAB nunca foi implementado. Em vez disso, foi criado o HTML 3.2, que era um pouco mais simples e foi implementado.
— Alohci
2
@Eoin - de fato. Ou seja, o que você realmente deseja nesses casos são tab stops . Mas não era sobre isso que o OP estava perguntando. O OP estava pedindo uma substituição por vários espaços seqüenciais e sem quebra, o que também não alinharia as linhas. O CSS tem uma tab-sizepropriedade que você realmente deseja, mas o suporte ao navegador é irregular. Caso contrário, o layout da tabela ou talvez o flexbox são suas melhores apostas.
— Alohci
5
isso não responde à pergunta. a resposta abaixo por kristian aborda a questão sobre a qual o usuário postou #
— Pranavan Maru
1265

Depende do conjunto de caracteres que você deseja usar.

Não há nenhuma entidade guia definido na ISO-8859-1 HTML - mas há um par de caracteres em branco diferente &nbsp;, como &thinsp;, &ensp;, e &emsp;.

Em ASCII, &#09;é uma guia.

Aqui está uma lista completa de entidades HTML e uma discussão útil sobre espaço em branco na Wikipedia .

— kristian
fonte
2
Qual a diferença entre &ensp;e &emsp;? Eu testei, os dois têm exatamente o mesmo espaço ..!
— Shafizadeh
3
O molho secreto para fazer & # 09; aparecer como um espaço com guias em HTML é a definição CSS de espaço em branco. <p style = "display: bloco embutido; espaço em branco: pré-enrolamento;"> & # 09; ¡Muy bien! A tabulação funciona para mim em espanhol e inglês </p>. espaço em branco: pré; também funciona. Você também pode usar uma tag "tab" <tab /> junto com a guia CSS :: before Selector :: before {content: "\ 0009";} mas ela não aparece como uma guia ao realçar, recortar e colar .
— Jules Bartow
3
@ Shafizadeh A partir das especificações do W3 : um espaço en é metade do tamanho do ponto e um espaço em é igual ao tamanho do ponto da fonte atual. &emsp;é um pouco maior. Eu posso ver a diferença no Chrome 64 e Firefox 58.
— Dmitry
Estava procurando isso ao criar uma grande consulta concat () no MySQL para uso em um Crystal Report. o ASCII (& # 09;) fez o trabalho perfeitamente!
— Mike D Wakelyn
Era isso que eu estava procurando. Coloquei alguns títulos espaçados usando o atributo justify da última linha, mas não quero que alguns deles se separem. O & ensp; impediu isso.
— precisa saber é o seguinte
195

& emsp; é a resposta.

No entanto, eles não serão tão funcionais quanto seria de esperar se você estiver acostumado a usar tabulações horizontais em processadores de texto, como Word, Wordperfect, Open Office, Wordworth, etc. Eles têm largura fixa e não podem ser personalizados.

O CSS oferece um controle muito maior e fornece uma alternativa até que o W3C forneça uma solução oficial.

Exemplo:

padding-left:4em

..ou..

margin-left:4em

..como apropriado

Depende do conjunto de caracteres que você deseja usar.

Você pode configurar algumas tags de tabulação e usá-las de maneira semelhante a como usaria as tags 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>

... e use-os assim:

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

Execute o trecho acima para ver um exemplo visual.

Discussão extra

Não há entidades de tabulação horizontal definidas no HTML ISO-8859-1; no entanto, existem outros caracteres de espaço em branco disponíveis além do habitual &nbsp, por exemplo; &thinsp;, &ensp;e o mencionado acima&emsp; .

Também vale ressaltar que em ASCII e Unicode, &#09;é uma tabulação horizontal.

— WonderWorker
fonte
2
Este não é um válido XHTMLde acordo com a W3 validador
— Buksy
Isso é apenas meia verdade, já que o & emsp; é verdadeira marcação W3C válida. Mas você está claramente se referindo ao exemplo CSS favorável. Nesse caso, estamos utilizando tags personalizadas, que são uma nova marcação e não fazem parte do conjunto W3C. O validador W3C é estrito ao ponto de sempre sinalizar tags personalizadas como erros. Cabe a você o que é mais importante. Já era hora de termos uma implementação oficial decente de guias adicionadas ao conjunto de marcação HTML. Espero que isto ajude.
— WonderWorker
2
Usei isso em um caso para cabeçalhos Swing JTable com um valor String e um caractere de tipo de seta HTML, onde eu precisava desse caractere como um separador. Funciona bem! Obrigado!
— Blake Neal
2
"Estranhamente, não há tabulação horizontal no html" Não é tão estranho quanto a formatação se afastou consistentemente do html para o css, e uma tabulação não é um elemento visual, apenas um elemento de formatação, mas boa resposta e bem explicada
— MikeT
75

Abaixo estão as três maneiras diferentes fornecidas pelo HTML para inserir espaço vazio

  1. Tipo &nbsp; para adicionar um único espaço.
  2. Tipo &ensp; para adicionar 2 espaços.
  3. Digite &emsp;para adicionar 4 espaços.
— sanjeev51
fonte
3
Apenas adicione ;a eles também. Como&nbsp;
— Amio.io
2
Esta resposta realmente responde à pergunta. É estúpido como uma resposta CSS é marcada como resposta.
— Mani
@Mani A pergunta foi feita em 2009 e a resposta aceita é de 2009. Esta resposta foi adicionada em 2018 .. Quando você olha dessa maneira, não é estúpido.
— ᴛʜᴇᴘᴀᴛᴇʟ
@ ᴛʜᴇᴘᴀᴛᴇʟ Esqueça se isso realmente responde ou não à pergunta, mas a que está marcada não responde com precisão é o ponto que estou tentando fazer.
— Mani
Esta é a resposta correta real. Obrigado!
— Ariel Monaco
67

Tentar &emsp;

É equivalente a quatro &nbsp;s.

— Abhishek Goel
fonte
De fato, não é a resposta correta como w3.org/MarkUp/html3/specialchars.html . diz claramente que depende do tipo de fonte a ser utilizada, em também o espaço é igual ao tamanho do ponto da fonte atual, eo espaço em como sendo equivalente a dois caracteres de espaço
— le0diaz
52

Realmente não existe uma maneira fácil de inserir vários espaços dentro (ou no meio) de um parágrafo. Aqueles que sugerem o uso de CSS estão perdendo o objetivo. Você nem sempre está tentando recuar um parágrafo de um lado, mas, de fato, tentando colocar espaços extras em um ponto específico dele.

Em essência, nesse caso, os espaços se tornam o conteúdo e não o estilo. Não sei por que tantas pessoas não vêem isso. Eu acho que a rigidez com que eles tentam impor a separação de estilo e regra de conteúdo (o HTML foi projetado para fazer as duas coisas desde o início - não há nada errado em definir ocasionalmente o estilo de um único elemento usando tags apropriadas sem ter que gastar muito mais na criação de folhas de estilo CSS e não há absolutamente nada ilegível quando usado com moderação. Há também algo a ser dito para poder fazer algo rapidamente.) se traduz em como eles só podem considerar caracteres de espaço em branco como sendo usados ​​apenas para estilo e recuo.

E quando não há uma maneira fácil de inserir espaços sem ter que confiar nas tags &emsp;e &nbsp;, eu argumentaria que o código resultante se torna muito mais ilegível do que se houvesse uma tag com nome apropriado que permitisse inserir rapidamente um grande número de espaços (ou, se você sabe, os espaços não foram consumidos desnecessariamente em primeiro lugar).

Porém, como foi dito acima, sua melhor aposta seria usar &emsp;para inserir no local correto.

— GonzoKnight
fonte
1
O HTML não foi projetado desde o início para ter um estilo personalizado.
— Markus Unterwaditzer 26/10/12
Ame o seu ponto de como nem sempre o recuo é o que as pessoas querem!
— Programas Redwolf
46

É melhor usar a pré tag. A tag pré define o texto pré-formatado.

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

and line breaks.

</pre>

saiba mais sobre a pré tag neste link

— Srikanth Muttavarapu
fonte
1
@HuzaifaSaifuddin, o que você quer dizer? <pre>é padronizado no HTML5 com o mesmo comportamento do HTML4.
— Sumit
Lamento que eu não sei Y i escreveu que .. Eu concordo com o que você say..Sorry para Informação errada
— Huzaifa Saifuddin
Eu estava formatando a saída para ser colada em planilhas, e isso me permitiu inserir \ t caracteres para fazer tabulação. Definitivamente foi a minha resposta. Bom andamento.
— Craig Brett
1
Esta é a melhor opção IMHO. Além disso, podemos aplicar uma definição de estilo em <pre>, para que possamos ter a fonte 'monospace' correta, se necessário. Exemplo: pré {font-family: "Lucida Console", Mônaco, monoespaço; tamanho da fonte: 90%; }
— reverpie
41

Me deparei com isso enquanto procurava por um método e acabei descobrindo o meu próprio que parece funcionar facilmente para o que se deseja. Eu sou novo em postar aqui, então espero que isso funcione ... Mas tenha isso em CSS:

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

Então, no seu HTML, essa deve ser sua "guia longa" no meio da frase, como eu precisava:

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

Economiza da quantidade &nbsp;ou da quantidade &emsp;necessária.

Espero que isso ajude alguém, felicidades!

— Roubar
fonte
3
Isso adicionará 80px à esquerda e 80px à direita da spantag, não exatamente uma guia.
— Mcont
Ainda é uma resposta inteligente, pois você adiciona apenas um pouco de marcação e permite que o CSS faça o estilo.
— invoca
9

Se o espaço em branco se tornar tão importante, talvez seja melhor usar o texto pré-formatado e a tag <pre>.

— pavium
fonte
O OP não está sendo tão específico sobre espaço em branco, apenas perguntou sobre atalhos para múltiplos &nbsp;'s. A chamada da <pre>tag criará muito trabalho extra.
— Isomorphismes
Para evitar a fonte monospace, use css "white-space: pre-wrap"
— Hultqvist
Espaço em branco não é uma that importantcoisa. É um fato da vida.
— Programas Redwolf
9

Se você deseja apenas recuar a primeira frase de um parágrafo, você pode fazer isso com um pequeno truque de CSS:

p:first-letter {
    margin-left: 5em;
}
— peirix
fonte
Sim. Isso vai funcionar também. Lembre-se de colocá-lo :first-letterse o objetivo é recuar apenas a primeira frase.
— Peirix 15/10/09
9

A tag <tab> nunca chegou aos navegadores, apesar de ter sido introduzida no HTML3. Sempre achei uma pena porque a vida seria muito mais fácil em muitas circunstâncias se a tivéssemos à nossa disposição. Mas você pode remediar isso facilmente para fornecer uma tag <tab> falsa. Adicione o seguinte no cabeçalho do seu HTML ou então (sem as tags de estilo) no seu CSS:

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

A partir de então, quando você precisar de uma guia em seu documento, coloque <tab> lá. Não é uma guia verdadeira, porque não está alinhada com as marcas de tabulação, mas funciona para a maioria das necessidades, sem ter que se mexer com entidades ou extensões de caracteres desajeitadas. Torna realmente fácil verificar sua fonte e muito fácil formatar coisas simples, nas quais você não quer ir para o incômodo de tabelas ou outras "soluções" mais complexas.

Um aspecto interessante dessa solução é que você pode fazer uma pesquisa / substituição rápida de um documento de texto para substituir todas as TABs pela tag <tab>.

Você pode definir um monte de TABs de posição absoluta verdadeira e usar a guia apropriada (por exemplo, <tab2> ou <tab5> ou o que for) onde for necessário, mas não encontrei uma maneira de fazer isso sem recuar as linhas subseqüentes .

— user1388236
fonte
7

Você pode usar uma tabela e aplicar um widthatributo à primeira <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
fonte
Obrigado!! Esta é a melhor e mais geral solução para situações em que o CSS não é possível.
— John Henckel
6

Eu usei uma extensão com estilo na linha. Eu tive que fazer isso enquanto processava uma sequência de texto sem formatação e preciso substituir o \ t por 4 espaços (appx). Eu não poderia usar &nbsp;mais adiante no processo em que eles estavam sendo interpretados, para que a marcação final tivesse espaços sem conteúdo.

HTML:

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

Eu usei em uma função php como esta:

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

Se você precisava de apenas uma guia, o seguinte funcionou para mim.

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

com o HTML algo como:

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

Você pode adicionar mais "guias" adicionando estilos adicionais de "guias" e alterando o HTML, como:

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

com o 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
fonte
4

Se você estiver usando CSS, sugiro o seguinte:

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

Isto irá recuar a primeira linha como nas publicações tradicionais.

— Slevin
fonte
4

Existe um css simples para isso:

white-space: pre;

Ele mantém os espaços adicionados no HTML em vez de unificá-los.

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

Considere da seguinte maneira: uma guia é igual a 64 pixels. Portanto, este é o espaço que podemos dar pelo CSS.

— Mateen
fonte
3

podemos usar style = "white-space: pre" assim:

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

o espaço em branco no interior é preenchido com guias, a quantidade de guias depende do texto.

ficará assim:

Text    : value
Text2   : value2
Text32  : value32
— Esgi Dendyanri
fonte
3

O código CSS ideal que deve ser usado deve ser uma combinação das propriedades "display" e "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.
— Olumide
fonte
2

Bem, se alguém precisar de um espaço em branco longo no início de uma linha apenas fora do parágrafo inteiro, isso pode ser uma solução:

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

Se isso é demais para escrever ou se é necessário essas guias em muitos lugares, você pode fazer isso

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

Em seguida, inclua isso no CSS:

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

Eu uso uma lista sem marcadores para dar a aparência "com guias". (É o que às vezes faço ao usar o MS Word)

No arquivo CSS:

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

E no arquivo HTML, use listas não ordenadas:

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

A vantagem dessa solução é que você pode fazer mais recuos usando listas aninhadas.

Um noob aqui falando, então se houver algum erro, por favor comente.

— funct7
fonte
(x) HTML deve especificar o conteúdo do documento, como ele é exibido deve ser tratado pelo CSS. Existem razões pelas quais o layout de páginas da Web usando tabelas nunca deve ser usado para dados não tabulares.
— Nielsvh
1

usamos classe de espaço personalizado

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

Inclua classe de espaço no CSS.

.space 
{
   margin-left:45px;
}
— rashedcs
fonte
1
Como na resposta de Alohci, use em/ remmedidas, para permitir o zoom no texto do navegador.
— Charlie Harding
0

Usando CSS e práticas recomendadas, a criação dinâmica de menus recuados e aninhados seria a seguinte:

  1. Crie um estilo para cada aninhamento, como indent1, indent2 etc, com cada um especificando sua própria margem esquerda. A estrutura do site raramente deve ir além de três níveis de aninhamento.
  2. Use uma variável estática (inteiro) dentro da função auto-recursiva para rastrear a recursão.
  3. Para cada loop, anexe o número do loop à palavra indent, usando scripts no servidor, como PHP ou ASP, para que esses menus sejam formatados adequadamente por CSS.

Alternativamente, percorrer a variável estática para adicionar espaçamento usando múltiplos &nbsp;ou<pre> etiquetas, ou outros caracteres, conforme o caso.

Ao testar o caractere de tabulação horizontal, &#09;descobri que ele não funciona como um substituto para vários &nbsp;no cenário que descrevi. Você pode ter resultados diferentes.

— Ro Mc
fonte
0

Essa é uma solução feia, mas você pode fazer isso

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

E então use a variável tab em suas strings.

— Aonghus McGovern
fonte
0

Somente tag "pré":

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

Você pode aplicar qualquer classe CSS nessa tag.

— Yanni
fonte
0

Eu simplesmente recomendaria:

/* 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
fonte
0 
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Verifique se o código de cores corresponde ao plano de fundo em que o px é variável no comprimento desejado para a guia.

Em seguida, adicione seu texto após o <t>. </ T>

O período é usado como espaço reservado e é mais fácil digitar, mas o '& # 160;' também pode ser usado no lugar do período, fazendo com que o código de cores seja irrelativo.

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

<t>&#160;</t>

Isso é útil principalmente para a exibição de parágrafos de texto, embora possa ser útil em outras partes dos scripts.

— Eric A. Tuttle
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.