From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/word-break/index.html | 132 ++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/pt-br/web/css/word-break/index.html (limited to 'files/pt-br/web/css/word-break/index.html') diff --git a/files/pt-br/web/css/word-break/index.html b/files/pt-br/web/css/word-break/index.html new file mode 100644 index 0000000000..4a2a5db7b1 --- /dev/null +++ b/files/pt-br/web/css/word-break/index.html @@ -0,0 +1,132 @@ +--- +title: word-break +slug: Web/CSS/word-break +tags: + - CSS + - Propriedade CSS + - Referencia +translation_of: Web/CSS/word-break +--- +
{{CSSRef}}
+ +

A propriedade CSS word-break é usada para especificar se o navegador deve inserir ou não quebras de linha onde, normalmente, o texto vazaria de seu container.

+ +
{{EmbedInteractiveExample("pages/css/word-break.html")}}
+ +
 
+ +
+

Nota: comparando com {{cssxref("overflow-wrap")}}, word-break criará uma quebra de linha no ponto exato em que o texto vazaria, mesmo que uma palavra pudesse ser colocada por completo em uma nova linha sem a necessidade de quebra da palavra.

+
+ +

Sintaxe

+ +
/* Valores específicos */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+
+/* Valores globais */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+
+ +

Valores

+ +
+
normal
+
Usa a regra de quebra de linha padrão.
+
break-all
+
Quebras de linha podem ser inseridas entre quaisquer caracteres de texto não-CJC (Chinês/Japonês/Coreano).
+
keep-all
+
Não permite quebra de linha para texto CJC. Texto não-CJC se comporta como normal.
+
break-word
+
Para evitar o vazamento, palavras que normalmente não seriam quebradas podem ser quebradas em pontos arbitrários se não houver pontos de quebra válidos na linha.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Examplos

+ +

Conteúdo HTML

+ +
<p>1. <code>word-break: normal</code></p>
+<p class="normal narrow">This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+
+<p>2. <code>word-break: break-all</code></p>
+<p class="breakAll narrow">This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+
+<p>3. <code>word-break: keep-all</code></p>
+<p class="keepAll narrow">This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+
+<p>4. <code>word-break: break-word</code></p>
+<p class="breakWord narrow">This is a long and
+  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+ +

Conteúdo CSS

+ +
.narrow {
+    padding: 5px;
+    border: 1px solid;
+    display: table;
+    max-width: 100%;
+}
+
+.normal {
+    word-break: normal;
+}
+
+.breakAll {
+    word-break: break-all;
+}
+
+.keepAll {
+    word-break: keep-all;
+}
+
+.breakWord {
+    word-break: break-word;
+}
+ +

{{ EmbedLiveSample('Examples', '100%', 600) }}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusCommentário
{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}{{Spec2('CSS3 Text')}}Definição inicial
+ +

Compatibilidade entre os navegadores

+ +
{{Compat("css.properties.word-break")}}
+ +

 

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf