Adicionar espaços entre o texto em HTML

Sushant Poudel 19 fevereiro 2023
  1. Use a tag <pre> para inserir espaços no texto em HTML
  2. Use &nbsp; inserir espaços no texto em HTML
  3. Use a propriedade CSS padding para inserir espaços no texto em HTML
Adicionar espaços entre o texto em HTML

Este artigo irá discutir alguns métodos para inserir espaços e tabulações no texto em HTML. O HTML geralmente não permite mais de um espaço em branco por vez. Esses métodos ajudam a adicionar mais de um espaço em branco.

Use a tag <pre> para inserir espaços no texto em HTML

A tag <pre> define um texto pré-formatado. Apresenta o texto exatamente como está escrito no código HTML. O espaço em branco dentro desta tag é exibido conforme escrito. É compatível com quase todos os navegadores da web. Podemos usar a tag <pre> para inserir espaços no texto usando HTML. A tag <pre> suporta quase todos os atributos globais no HTML.

Por exemplo, dentro do corpo do HTML, abra a tag <pre> primeiro. Dentro desta tag, digite o texto de sua escolha. Agora, normalmente adicione alguns espaços em branco aleatórios entre as palavras de sua frase no texto (I'm learning HTML used in the example below). Depois de completar o texto desejado, feche a tag <pre>. Além disso, não se esqueça de fechar todas as tags abertas anteriormente.

O exemplo abaixo ilustra um método para adicionar espaços bancários no texto em HTML. Depois que a tag <pre> é aberta, ela especifica um texto pré-formatado. O texto I'm learning HTML é escrito dentro da tag <pre>. Como podemos ver, cinco espaços em branco são usados ​​entre as palavras learning e HTML. A saída também exibe cinco espaços em branco entre as duas palavras, assim como foi escrito. Podemos colocar tanto espaço quanto quisermos. Desta forma, podemos adicionar espaços em branco no texto em HTML.

Código de exemplo:

<pre> I'm learning HTML</pre>

Use &nbsp; inserir espaços no texto em HTML

Podemos usar o &nbsp; tag para adicionar um espaço em branco no texto em um código HTML. A entidade NBSP significa espaço ininterrupto. Um espaço ininterrupto interpreta que é um espaço que não se dividirá em uma nova linha. Duas palavras separadas por espaço não separável estarão na mesma linha, e não em linhas diferentes. É vantajoso impedir que os navegadores truncem os espaços nas páginas HTML.

Por exemplo, dentro do corpo do HTML, digite o texto de sua escolha. No local onde deseja adicionar o espaço em branco, digite &nbsp;. Você deve digitar o mesmo número de &nbsp; como o espaço em branco que você deseja. Escreva cinco instâncias de &nbsp; e continue digitando o resto do texto. Após a conclusão, feche todas as tags abertas anteriormente.

O exemplo abaixo ilustra outro método para adicionar espaços em branco em seu texto em um código HTML. Após a palavra learning, a entidade &nbsp; é pedido cinco vezes posteriormente. Isso implica que existem cinco espaços em branco entre as palavras learning e HTML. Se você digitar 5 espaços em seu texto no código, o navegador removerá quatro espaços em branco, mas &nbsp; ajuda a adicionar quantos espaços você desejar. Portanto, esta é outra maneira de adicionar espaços em branco em um código HTML.

Código de exemplo:

<body>
I'm learning&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML 
</body>

Use a propriedade CSS padding para inserir espaços no texto em HTML

Também podemos usar a propriedade CSS padding para adicionar espaços em branco no texto em HTML. Podemos usar a propriedade padding com a tag <span> para obter o espaço em branco. A tag <span> é chamada de contêiner em linha, pois não começa em uma nova linha. É usado para marcar um texto ou documento. Não representa nada inerentemente porque não faz nenhuma mudança visual sozinho. Ele é usado para fins de estilização e também é compatível com todos os navegadores da web. Ele também suporta todos os atributos globais e eventos em HTML. Podemos usar a propriedade padding-left em um elemento <span> para adicionar espaços.

Por exemplo, dentro do corpo do HTML, digite o texto de sua preferência. Onde você deseja adicionar o espaço em branco, crie um elemento <span> e aplique o estilo nele. Defina a propriedade padding-left para 30px. Depois disso, feche a tag <span>. Escreva o texto restante e feche todas as tags abertas anteriormente no código.

Criamos um elemento <span> após a palavra learning no exemplo abaixo. Aplicamos o preenchimento esquerdo de 30px no elemento. Isso significa que criamos um espaço de 30px após a palavra learning e, em seguida, o resto da palavra continuou. Assim, adicionamos espaços no texto usando CSS e HTML.

Código de exemplo:

<body>
I'm learning <span style="padding-left:30px;"></span>HTML
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn