Articles
Introdução ao CSS
Propriedades CSS para exibição de código e citações

Propriedades CSS para exibição de código e citações

Este artigo explica as propriedades CSS relacionadas à exibição de código e citações.

Você pode aprender sobre as propriedades CSS relacionadas à exibição de código e citações, como quotes e user-select, incluindo seus casos de uso e como escrevê-las.

YouTube Video

HTML para Visualização

css-code-quotation.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

Propriedades CSS para exibição de código e citações

Propriedade white-space 

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

A propriedade white-space é uma propriedade CSS que especifica como os espaços em branco e quebras de linha são tratados dentro de um elemento. Por padrão, o HTML trata vários espaços como um único espaço, mas a propriedade white-space permite modificar esse comportamento.

Principais valores de white-space

  • O valor padrão normal faz com que vários espaços sejam reduzidos a um e as linhas quebrem automaticamente.
  • nowrap reduz os espaços a um, mas impede quebras de linha. O conteúdo é exibido em uma única linha.
  • pre preserva os espaços em branco e as quebras de linha como estão. Quebras de linha não ocorrem.
  • pre-wrap preserva os espaços em branco e as quebras de linha, permitindo a quebra de linhas ao mesmo tempo.
  • pre-line reduz os espaços, mas preserva as quebras de linha e permite a quebra de linhas.
  • break-spaces preserva os espaços e as quebras de linha, enquanto permite quebras em palavras longas ou espaços vazios.

Propriedade overflow-wrap 

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

A propriedade overflow-wrap, anteriormente conhecida como word-wrap, define como as palavras são tratadas quando excedem a largura do contêiner. Usando essa propriedade, você pode ajustar palavras corretamente para evitar que o texto ultrapasse os limites e quebre o layout.

Neste exemplo, com normal, palavras longas podem ultrapassar o contêiner e causar rolagem horizontal, mas break-word força a quebra de palavras longas.

Valores da propriedade

overflow-wrap possui principalmente dois valores:.

  • normal

    normal é o valor padrão, onde o navegador segue as regras padrão de quebra de palavras. Normalmente, as palavras só quebram em pontos possíveis, como espaços ou hífens. Se uma palavra for extremamente longa, ela pode ultrapassar a largura do contêiner e quebrar o layout.

  • break-word break-word força uma quebra de linha, se necessário, ajustando o texto para a próxima linha independentemente do comprimento da palavra. Isso ajuda a evitar que o layout do container seja quebrado devido a palavras longas.

    Quando break-word é especificado, as palavras são quebradas mesmo em lugares sem espaços ou hifens para se ajustar à largura da tela. Isso é especialmente útil para URLs ou palavras muito longas.

Diferenças entre overflow-wrap e outras propriedades

Propriedades semelhantes a overflow-wrap incluem word-break e white-space.

Diferença em relação a word-break

word-break define como palavras inteiras são tratadas, enquanto overflow-wrap apenas ativa a quebra quando uma palavra excede a largura do container. Por exemplo, word-break: break-all; quebra palavras em qualquer posição, mesmo que não sejam longas, enquanto overflow-wrap apenas quebra palavras quando elas excedem o container.

Diferença em relação a white-space

A propriedade white-space controla como quebras de linha e espaços são tratados em todo o texto. Ao contrário de overflow-wrap, white-space define se quebras de linha e espaços são preservados, mas não afeta diretamente a quebra de palavras.

Por exemplo, white-space: nowrap; garante que todo o texto permaneça em uma única linha, sem quebras. Por outro lado, overflow-wrap controla a quebra de texto.

Casos de Uso Prático

overflow-wrap é particularmente útil nas seguintes situações:.

  1. Exibir URLs: Evita problemas de layout ao exibir URLs longas.
  2. Termos Técnicos: Lida com casos em que palavras contínuas em inglês ou termos técnicos excedem a largura do container.
  3. Design Responsivo: Garante que textos longos não quebrem o layout, mesmo em telas pequenas.

Propriedade quotes 

1q {
2    quotes: "(" ")" "[" "]";
3}

A propriedade quotes é usada para personalizar aspas. Normalmente, aspas são inseridas automaticamente ao envolver o conteúdo de elementos <blockquote> ou <q>, mas ao usar a propriedade quotes é possível especificar aspas personalizadas.

Neste exemplo, parênteses ((, )) são usados como aspas externas. Além disso, aspas aninhadas são representadas por colchetes ([, ]).

Sintaxe 

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

A propriedade quotes pode ser especificada com valores como os seguintes:.

  • none: Nenhuma aspa será exibida.
  • Uma série de aspas: Especifique as aspas de abertura e fechamento. O primeiro conjunto representa as aspas externas, enquanto os conjuntos subsequentes são para citações aninhadas.

Pontos principais da propriedade quotes

A propriedade quotes é útil para personalizar aspas usadas em citações de texto. Ao definir aspas apropriadas de acordo com o design e o idioma, você pode obter uma apresentação de página mais sofisticada. Usar a propriedade quotes oferece benefícios como os seguintes:.

  • Personalizar aspas: Você pode mudar o formato padrão das aspas ou definir aspas adaptadas a um design específico.
  • Suporta citações aninhadas: Você pode aplicar diferentes conjuntos de aspas para citações aninhadas.
  • Personalizável por país e idioma: Aplique facilmente diferentes estilos de aspas dependendo do idioma ou país, o que é útil para sites internacionais.

Propriedade user-select 

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

  • A propriedade user-select é uma propriedade CSS usada para controlar se os usuários podem selecionar texto. Ao usar essa propriedade, você pode impedir que o texto seja copiado em elementos específicos ou em toda a página, ou, inversamente, torná-lo selecionável. Se você especificar all para a propriedade user-select, o elemento inteiro será selecionado de uma vez. Por exemplo, quando um usuário clica em um campo de texto ou parágrafo, o elemento inteiro é selecionado de uma vez.

  • Também pode ser usado para seleção em massa de código-fonte.

  • Neste exemplo, o texto do primeiro parágrafo é selecionável, mas o texto do segundo parágrafo não é. Na classe select-all, a propriedade user-select é definida como all, permitindo que o elemento inteiro seja selecionado de uma vez.

Sintaxe 

1element {
2    user-select: auto | none | text | all | contain;
3}

A propriedade user-select pode ser especificada com os seguintes valores:.

  • auto: Usa o comportamento padrão do navegador. A seleção de texto é permitida na maioria dos elementos, mas pode ser restrita em alguns elementos interativos, como botões e links.
  • none: A seleção de texto é completamente desativada. Os usuários não poderão selecionar texto dentro desse elemento.
  • text: Permite que apenas o texto dentro do elemento seja selecionado.
  • all: O elemento inteiro é selecionado de uma vez. Em vez de uma seleção parcial, o elemento inteiro é selecionado como um todo.
  • contain: Suportado apenas por alguns navegadores. Permite que apenas o elemento no local clicado seja selecionado.

Navegadores Compatíveis

A propriedade user-select é suportada pela maioria dos navegadores modernos. No entanto, alguns navegadores podem exigir prefixos de fornecedor, como -webkit-user-select.

  • Chrome: Suportado
  • Firefox: Suportado
  • Safari: Suportado (requer o prefixo -webkit-).
  • Edge: Suportado
  • Internet Explorer: Não Suportado

Principais Casos de Uso

A propriedade user-select oferece as seguintes vantagens.

  • Elementos da interface do usuário: Desative a seleção de texto para evitar interferências com operações de clique ou arrastar.
  • Prevenir a cópia de texto: Impedir a seleção e a cópia de texto em certos elementos.
  • Formulários e elementos interativos: Aplique em elementos interativos onde a seleção de texto seja desnecessária para melhorar a experiência do usuário.

Resumo

A propriedade user-select é uma propriedade CSS útil que permite controle flexível sobre a seleção de texto em uma página da web. Ela pode evitar que os usuários selecionem acidentalmente texto desnecessário ou permitir que eles selecionem tudo de uma vez, acomodando várias interações.

A propriedade tab-size 

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}
  • A propriedade tab-size é usada para personalizar o espaço para caracteres de tabulação. Por padrão, a largura da tabulação é geralmente ajustada para 8 espaços, mas pode ser modificada para qualquer valor usando a propriedade tab-size.

Sintaxe 

1element {
2    tab-size: length | number;
3}

A propriedade tab-size pode aceitar os seguintes tipos de valores.

  • number: Especifica a largura do caractere de tabulação em termos de número de caracteres. Você pode especificar tanto um número inteiro quanto um decimal.
  • length: Especifica a largura do caractere de tabulação usando unidades de comprimento (por exemplo, px, em).

Notas

  • A propriedade tab-size é tipicamente usada com fontes monoespaçadas. Ao ser usada com fontes proporcionais, a largura da tabulação pode se tornar irregular.

  • Ao especificar o número de caracteres, esteja atento à escala em diferentes dispositivos.

Resumo

Usar a propriedade tab-size melhora a flexibilidade ao exibir código ou caracteres de tabulação. Como desenvolvedor, ajustar corretamente a largura da tabulação garante a legibilidade do código e a consistência do design.

A propriedade text-indent 

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}
  • A propriedade text-indent é usada para aplicar um recuo na primeira linha de texto em um elemento de bloco por uma distância especificada. Esta propriedade permite estilizar apenas a primeira linha de um parágrafo.

Sintaxe 

1element {
2    text-indent: length | percentage;
3}

A propriedade text-indent pode aceitar os seguintes tipos de valores.

  • length: Especifica o recuo usando unidades de comprimento (por exemplo, px, em).
  • percentage: Especifica o recuo como uma porcentagem com base na largura do elemento contêiner.

Notas

  • text-indent se aplica apenas a elementos de bloco. Não tem efeito em elementos em linha.

Resumo

A propriedade text-indent é uma ferramenta simples, mas poderosa, para criar designs de texto legíveis. Dominando o básico e entendendo casos de uso avançados e considerações, você pode estilizar de forma mais eficaz.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades CSS relacionadas ao espaçamento de textoPropriedades CSS relacionadas ao modelo de caixa