CSS Espaçamento do Texto
Seguintes propriedades:
Ø
text-indent
Ø
letter-spacing
Ø
line-height
Ø
word-spacing
Ø
white-space
Recuo de Texto
A text-indent é a propriedade usado
para o recuo da primeira linha de um texto.
Na
prática
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 30px;
}
</style>
</head>
<body>
<h1>Usando recuo de
texto</h1>
<p>Em meus anos mais jovens
e vulneráveis, meu pai me deu alguns conselhos que venho pensando desde então.
'Sempre que você sentir vontade de criticar alguém', ele me disse, 'lembre-se
de que todas as pessoas neste mundo não tiveram as vantagens que você
teve.'</p>
</body>
</html>
Espaçamento entre
Letras
A letter-spacing é a propriedade para
especificar o espaço entre caracteres de um texto.
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing:7px;
}
h3 {
letter-spacing:
-2px;
}
</style>
</head>
<body>
<h1>Usando espaçamento entre letras</h1>
<h2>Este é o título 1</h2>
<h3>Este é o título 2</h3>
</body>
</html>
Altura da linha
A line-height é a propriedade para especificar
o espaço entre linhas.
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.6;
}
p.big {
line-height: 1.9;
}
</style>
</head>
<body>
<h1>Using line-height</h1>
<p>
Este é um parágrafo com uma altura de linha
padrão.<br>
A altura da linha padrão na maioria dos navegadores é de
cerca de 110% a 120%.<br>
</p>
<p class="small">
Este é um parágrafo com uma altura de linha
menor.<br>
Este é um parágrafo com uma altura de linha menor.
<br>
</p>
<p class="big">
Este é um parágrafo com uma altura de linha
maior.<br>
Este é um parágrafo com uma altura de linha
maior.<br>
</p>
</body>
</html>
Espaçamento
entre palavras
A word-spacing é a propriedade para especificar
o espaço entre as palavras do texto.
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
p.um {
word-spacing: 9px;
}
p.dois {
word-spacing: -2px;
}
</style>
</head>
<body>
<h1>Usando espaçamento entre palavras</h1>
<p>Este é um parágrafo com espaçamento normal entre
palavras.</p>
<p class="um">Este é um parágrafo com
espaçamento entre palavras maior.</p>
<p class="dois">Este é um parágrafo com
menor espaçamento entre palavras.</p>
</body>
</html>
Espaço em
branco
A white-space é a propriedade para especificar um
espaço em branco de um elemento.
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space:
nowrap;
}
</style>
</head>
<body>
<h1>Usando espaço em branco</h1>
<p>
Este é um texto que não quebrará.
Este é um texto que não quebrará.
Este é um texto que não quebrará.
Este é um texto que não quebrará.
Este é um texto que não quebrará.
Este é um texto que não quebrará.
Este é um texto que não quebrará.
Este é um texto que não quebrará.
Este é um texto que não quebrará
</p>
<p>Tente remover a propriedade white-space para ver a
diferença! </p>
</body>
</html>
