{"id":577,"date":"2020-07-03T10:50:41","date_gmt":"2020-07-03T13:50:41","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=577"},"modified":"2022-12-09T08:35:20","modified_gmt":"2022-12-09T11:35:20","slug":"texto-css-espacamento-de-texto-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/texto-css-espacamento-de-texto-css\/","title":{"rendered":"Texto CSS – Espa\u00e7amento de texto CSS"},"content":{"rendered":"

A\u00a0text-indent<\/code>propriedade \u00e9 usada para especificar o recuo da primeira linha de um texto:<\/p>\n

 <\/p>\n

p {<\/code>
\ntext-indent: 50px;<\/code>
\n}<\/code><\/p>\n

\"\"<\/p>\n

Outro exemplo<\/p>\n

h1 {<\/code>
\nletter-spacing: 3px;<\/code>
\n}<\/code><\/p>\n

h2 {<\/code>
\nletter-spacing: -3px;<\/code>
\n}<\/code><\/p>\n

Resultado:<\/p>\n

 <\/p>\n

\"\"<\/p>\n

A\u00a0line-height<\/code>propriedade \u00e9 usada para especificar o espa\u00e7o entre as linhas:<\/p>\n

 <\/p>\n

p.small {<\/code>
\nline-height: 0.8;<\/code>
\n}<\/code><\/p>\n

p.big {<\/code>
\nline-height: 1.8;<\/code>
\n}<\/code><\/p>\n

\"\"<\/p>\n

Veja o c\u00f3digo<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.small {\r\n  line-height: 0.7;\r\n}\r\n\r\np.big {\r\n  line-height: 1.8;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>\r\nThis is a paragraph with a standard line-height.<br>\r\nThe default line height in most browsers is about 110% to 120%.<br>\r\n<\/p>\r\n\r\n<p class=\"small\">\r\nThis is a paragraph with a smaller line-height.<br>\r\nThis is a paragraph with a smaller line-height.<br>\r\n<\/p>\r\n\r\n<p class=\"big\">\r\nThis is a paragraph with a bigger line-height.<br>\r\nThis is a paragraph with a bigger line-height.<br>\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Espa\u00e7amento entre Palavras<\/strong><\/p>\n
A word-spacing<\/code> propriedade \u00e9 usada para especificar o espa\u00e7o entre as palavras em um texto.<\/p>\n
O exemplo a seguir demonstra como aumentar ou diminuir o espa\u00e7o entre as palavras:<\/p>\n
 <\/p>\n
h1 {<\/code>
\nword-spacing: 10px;<\/code>
\n}<\/code><\/p>\n
h2 {<\/code>
\nword-spacing: -5px;<\/code>
\n}<\/code><\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  word-spacing: 10px;\r\n}\r\n\r\nh2 {\r\n  word-spacing: -5px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Espa\u00e7o em branco<\/strong><\/p>\n
A white-space<\/code>propriedade especifica como o espa\u00e7o em branco dentro de um elemento \u00e9 tratado.<\/p>\n
Este exemplo demonstra como desativar a quebra de texto dentro de um elemento:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np {\r\n  white-space: nowrap;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>White Space<\/h2>\r\n\r\n<p>\r\nThis is some text. This is some text. This is some text.\r\nThis is some text. This is some text. This is some text.\r\nThis is some text. This is some text. This is some text.\r\nThis is some text. This is some text. This is some text.\r\nThis is some text. This is some text. This is some text.\r\n<\/p>\r\n\r\n<p>Try to remove the white-space property to see the difference.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n