9.1 Propriedade text-indent
As propriedades de parágrafos em CSS desempenham um papel importante na formatação do texto, garantindo uma leitura fácil e visualmente agradável. Entre elas, text-indent e text-align-last são ferramentas importantes para ajustar indentação e alinhamento da última linha do texto no parágrafo.
A propriedade text-indent controla a indentação da primeira linha de texto dentro de um elemento de bloco. Ela é frequentemente usada para criar recuos no início dos parágrafos, o que melhora a legibilidade e a estrutura do texto.
Valores:
- Valores absolutos: valores em unidades fixas, como pixels (
px), pontos (pt), centímetros (cm) etc. Por exemplo,text-indent: 20px; - Valores percentuais: valores em porcentagens da largura do bloco que contém. Por exemplo,
text-indent: 5%; - Valores negativos: os recuos podem ser negativos, o que resulta em texto alinhado à esquerda além das bordas do container. Por exemplo,
text-indent: -20px;
Exemplo de uso:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Esse é um parágrafo com uma indentação da primeira linha de 20 pixels.</p>
<p class="indent-5percent">Esse é um parágrafo com uma indentação da primeira linha de 5% da largura do bloco.</p>
<p class="indent-negative">Esse é um parágrafo com uma indentação negativa da primeira linha de 20 pixels.</p>
</body>
9.2 Propriedade text-align-last
A propriedade text-align-last controla o alinhamento da última linha de texto dentro de um elemento de bloco. É útil para alcançar um alinhamento consistente nos parágrafos, especialmente quando o texto está justificado (justify).
Valores:
auto: a última linha é alinhada como texto normal (valor padrão)left: a última linha é alinhada à esquerdaright: a última linha é alinhada à direitacenter: a última linha é centralizadajustify: a última linha é justificada, como as outras linhas do parágrafo
Exemplo de uso:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Esse é um parágrafo com texto justificado e a última linha alinhada à esquerda.</p>
<p class="justify-right">Esse é um parágrafo com texto justificado e a última linha alinhada à direita.</p>
<p class="justify-center">Esse é um parágrafo com texto justificado e a última linha centralizada.</p>
<p class="justify-justify">Esse é um parágrafo com texto e a última linha justificada.</p>
</body>
9.3 Uso conjunto das propriedades
As propriedades text-indent e text-align-last podem ser usadas em conjunto para criar uma formatação de parágrafos mais complexa, melhorando a legibilidade e a estrutura visual do texto.
Exemplo de HTML e CSS:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Este parágrafo tem uma indentação da primeira linha de 30 pixels, o texto está justificado e a última linha alinhada à direita.
Isso demonstra o uso conjunto das propriedades text-indent e text-align-last para alcançar o efeito de formatação desejado.
</p>
</body>
Explicação do código:
text-indent: 30px;: define a indentação da primeira linha de texto para 30 pixelstext-align: justify;: justifica o texto na largura do containertext-align-last: right;: alinha a última linha do texto à direitawidth: 300px;: define a largura do container para o textoborder: 1px solid #000;: adiciona uma borda em volta do container de textopadding: 10px;: define o espaçamento interno dentro do container
GO TO FULL VERSION