Como definir espaçamento e colocação de texto em CSS

Ao escrever um documento, é preciso organizar o texto corretamente. Isso ajudará os usuários a entender o fluxo de conteúdo e auxiliar na leitura do documento. Para fazer isso, deve haver ajustes adequados de texto, como recuo, espaços de palavras, alinhamento, direção e mais. Mais especificamente, o CSS nos permite usar várias propriedades para ajustar o espaçamento e a colocação de texto.

O resultado deste artigo será:

• O que é espaçamento de texto?
• Como usar propriedades de espaçamento de texto CSS
• Quais são as propriedades de colocação de texto CSS?
• Como usar as propriedades de colocação de texto CSS?

O que é espaçamento de texto?

O espaçamento do texto refere -se à quantidade de espaço entre o texto em particular. Várias propriedades CSS são utilizadas para adicionar espaços ao texto.

Como usar propriedades de espaçamento de texto CSS?

Para fornecer espaços dentro do texto, o CSS nos permite usar propriedades diferentes, listadas abaixo:

• espaço branco
• Indent
• espaçamento de palavras
• altura da linha
• espaçamento de cartas

Exemplo 1: como o texto do elemento de recuo?

CSS “Indent”A propriedade é utilizada para adicionar o recuo à primeira linha de um texto. Para utilizá -lo, adicione o elemento div com a classe “recuar”. Dentro desta div, adicione

tag para o cabeçalho e

tag para adicionar um parágrafo.

Html

Propriedade do Indent CSS

O espaçamento de texto fornece uma aparência muito legal para o conteúdo escrito.
O texto deve ser quebrado em pedaços gerenciáveis.

Div "indent" de estilo

.recuo
Largura: 350px;
Altura: 200px;
Indente de texto: 40px;
margem: automático;
preenchimento: 5px;
Background-Color: #ffc107;
fronteira: 10px Solid #9E9E9E;

A lista de propriedades do CSS aplicada à Div de recuperação é explicada abaixo:

• ““largura”A propriedade é utilizada para o cenário da largura do elemento.
• ““altura”A propriedade é usada para definir a altura do elemento.
• ““Indent”A propriedade está definida com o valor de“40px”, Que representa espaço de 40px no início da primeira linha de um parágrafo.
• ““margem”Propriedade com o valor definido como“auto”Gera um espaço igual ao redor do elemento.
• ““preenchimento”Propriedade com o valor“5px”Adicione o espaço de 5px em torno do conteúdo do elemento.
• ““cor de fundo”Propriedade especifica a cor de fundo do elemento.
• ““fronteira”Propriedade com o valor definido como“10px sólido #9e9e9e”Significa a largura da fronteira, o estilo de borda e a cor da borda.

Estilo “h2” de “indent” div

.recuo H2
Decoração de texto: 3px sublinhado cinza;

O

Elemento de cabeçalho da divinddecoração de texto”Propriedade com o valor“3px sublinhado cinza" onde o "3px”Representa a largura da linha,“sublinhado”Representa a linha sob o texto e“cinza”É a cor.

Saída

Exemplo 2: Como adicionar espaços brancos dentro do elemento?

O "CSS-Space Branco”Propriedade especifica os espaços brancos dentro do elemento específico. Esta propriedade é baseada nos seguintes valores:

• normal
• Nowrap
• pré-escravo
• pré
• pré-linha
• Breakspaces

Html

No CSS, especifique a propriedade do espaço branco com o valor “pré-linha”:

Espaço branco: pré-linha;

Saída

Exemplo 3: Como adicionar espaços entre as palavras?

O CSS “espaçamento de palavras”A propriedade é utilizada para especificar os espaços entre o texto do elemento. Esta propriedade está associada aos seguintes valores:

• comprimento
• normal
• inicial
• herdar

Olhe para o exemplo!

Então, neste exemplo, adicionaremos o “espaçamento de palavras”Propriedade com o valor“30px”:

Espacamento de palavras: 30px;

Saída

Exemplo 4: Como adicionar espaços entre as linhas?

O "altura da linha”A propriedade é utilizada para especificar o espaço vertical entre as linhas de texto.

Aqui neste exemplo, a propriedade de altura de linha é usada com o valor “3em”:

altura da linha: 3em;

Saída

Exemplo 5: Como adicionar espaços entre os caracteres de texto?

O CSS “espaçamento de cartas”A propriedade é utilizada para adicionar os espaços entre os caracteres de texto.

Aqui, o elemento é fornecido com a propriedade de espaçamento de cartas com o valor de “-1px”No CSS:

Espaço de carta: -1px;

Saída

Quais são as propriedades de colocação de texto?

Colocação de texto refere -se ao alinhamento de texto. Ele significa a posição do texto como esquerda, direita e muito mais, em conexão com o ponto de inserção do texto.

Como usar as propriedades de colocação de texto CSS?

A seguir, estão as propriedades que podem ser utilizadas para ajustar a colocação do texto.

• Texto alinhado-last
• alinhamento de texto
• Alinhamento vertical
• direção
• unicode-bidi

Exemplo 1: Como alinhar a última linha do texto do elemento?

O CSS “Texto alinhado-last”A propriedade é utilizada para ajustar o alinhamento da última linha do texto. No nosso caso, definimos a propriedade de texto-alinhamento como "correto":

Text-align-last: Certo;

Saída

Exemplo 2: Como alinhar o texto horizontalmente em html?

O CSS “alinhamento de texto”A propriedade é utilizada para alinhar o texto horizontalmente. Por exemplo, definimos seu valor como “certo”:

Alinhamento de texto: à direita;

Saída

Exemplo 3: Como alinhar o texto verticalmente em html?

O "Alinhamento verticalA propriedade do CSS é usada para alinhar o texto verticalmente.

Para usar esta propriedade, adicione um “

”Elemento para adicionar um parágrafo ao documento desejado. Este parágrafo consiste nos elementos em certos pontos com id como “sobrescrito”:

Alinhamento de texto fornece o leitores com um visualmente
texto lógico.

No CSS, o elemento com id “sobrescrito”Está estilizado com as seguintes propriedades:

#superscript
Background-Color: RGB (3, 162, 11);
Alinhamento vertical: super;

Aqui:

• ““cor de fundo”A propriedade é utilizada para definir a cor de fundo do elemento.
• ““Alinhamento vertical" valor da propriedade "super”Alinhará o texto ligeiramente verticalmente acima.

Saída

Exemplo 4: Como mudar a direção do texto?

O CSS “direção”A propriedade é utilizada para modificar a direção do texto do elemento.

No CSS, a propriedade de direção com o valor “rtl”É especificado para tornar a direção do elemento da direita para a esquerda:

direção: rtl;

Saída

Exemplo 5: Como lidar com o texto bidirecional em html?

Para lidar com o texto bidirecional em um documento, o CSS “unicode-bidi”Propriedade é utilizada. O texto bidirecional refere-se ao documento ter texto em ambas as direções, da direita para a esquerda e da esquerda para a direita. O texto bidirecional geralmente existe no documento com vários idiomas, que podem ser definidos usando o “direção" propriedade.

Para a demonstração, adicione o seguinte código no arquivo CSS:

direção: rtl;
Unicode-Bidi: Bidi-Override;

Aqui:

• ““direção”A propriedade está definida com o valor“rtl”, Que indica a direita para a direção esquerda do texto.
• ““unicode-bidi”Propriedade com o valor definido como“Bidi-Override”É usado para especificar se o texto fornecido deve ser substituído para suportar vários idiomas em um documento.

Saída

Isso se tratava de ajustar o espaçamento e a colocação do texto no CSS.

Conclusão

Ao escrever um documento, é muito necessário ter em mente o formato e o estilo do documento. Um documento bem formado não produz nenhum problema de legibilidade. Para fazer isso, o CSS nos fornece propriedades diferentes que ajudam no espaçamento e colocação do texto em html. Algumas das propriedades são “alinhamento de texto","direção","Texto alinhado-last", e mais. Este post demonstrou várias propriedades CSS que ajudam nas configurações de alinhamento e colocação de texto dos documentos HTML.