diff options
Diffstat (limited to 'files/pt-br/web/css/text-overflow/index.html')
| -rw-r--r-- | files/pt-br/web/css/text-overflow/index.html | 374 |
1 files changed, 374 insertions, 0 deletions
diff --git a/files/pt-br/web/css/text-overflow/index.html b/files/pt-br/web/css/text-overflow/index.html new file mode 100644 index 0000000000..e2bfb7d6d7 --- /dev/null +++ b/files/pt-br/web/css/text-overflow/index.html @@ -0,0 +1,374 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +translation_of: Web/CSS/text-overflow +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>A propriedade <code>text-overflow</code> do <a href="/en/CSS" title="CSS">CSS</a> determina como o conteúdo que ultrapassou a sua div e que não é mostrado ao usuário deve ser exibido. Ele pode ser cortado, mostrar reticências ou até mesmo exibir qualquer string definida pelo autor.</p> + +<p><img alt="text-overflow.png" class="default internal" src="/@api/deki/files/5846/=text-overflow.png"></p> + +<p>O corte acontece na borda da caixa; para cortar no limite de caracteres de uma string personalizada, pode-se usar (<code>''</code>).</p> + +<p>Essa propriedade afeta apenas o conteúdo que está ultrapassando o bloco ou a div no sentido da linha horizontal (não corta o texto na parte de baixo de um bloco ou div, por exemplo). O texto pode ultrapassar ou transbordar quando utilizado <span style="line-height: inherit;">‘</span><code class="css" style="font-size: 14px; line-height: inherit;"><code style="font-size: 14px;">white-space:nowrap</code></code><span style="line-height: inherit;">’ ou quando uma palavra for muito grande.</span></p> + +<p>Essa propriedade do CSS não força um estouro para que ele ocorra. Para que isso aconteça, é necessário que o autor utilize algumas propriedades adicionais no elemento, como setar a propriedade overflow para <span style="font-family: courier new,andale mono,monospace;">hidden</span>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-overflow")}}</pre> + +<pre>/* One-value syntax: the value describe the overflow performed at the end of the line (right end if ltr, left end if rtl) */ +text-overflow: clip +text-overflow: ellipsis +text-overflow: "…" + +/* Two-value syntax: the first value describes the overflow at the left end of the line, + the second at the right end. Directionality has no influence */ + +text-overflow: clip ellipsis +text-overflow: "…" "…" + +text-overflow: inherit</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>clip</code></dt> + <dd>This keyword value indicates to truncate the text at the limit of the <a href="/en/CSS/box_model" title="en/CSS/Box_model">content area</a>, therefore the truncation can happen in the middle of a character. To truncate at the transition between two characters, the empty string value (<code>''</code>) must be used. The value <code>clip</code> is the default for this property.</dd> + <dt><code>ellipsis</code></dt> + <dd>This keyword value indicates to display ellipses (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) to represent clipped text. The ellipsis is displayed inside the <a href="/en/CSS/box_model" title="en/CSS/Box_model">content area</a>, shortening more the size of the displayed text. If there is not enough place to display ellipsis, they are clipped.</dd> + <dt><code><string></code> {{ experimental_inline() }}</dt> + <dd>The {{cssxref("<string>")}} to be used to represent clipped text. The string is displayed inside the <a href="/en/CSS/box_model" title="en/CSS/Box_model">content area</a>, shortening more the size of the displayed text. If there is not enough place to display the string itself, it is clipped.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css">p { + white-space: nowrap; + width: 100%; + overflow: hidden; /* "overflow" value must be different from "visible" */ + + text-overflow: ellipsis; +} +</pre> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col">CSS value</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> + </tr> + <tr> + <th scope="col">Expected Result</th> + <th scope="col">Live result</th> + <th scope="col">Expected Result</th> + <th scope="col">Live result</th> + </tr> + </thead> + <tbody> + <tr> + <td><em>visible overflow</em></td> + <td style="font-family: monospace;">1234567890</td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">0987654321</td> + <td> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip</code></td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div> + </td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ''</code></td> + <td style="font-family: monospace;">12345</td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div> + </td> + <td style="font-family: monospace;">54321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">.4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip clip</code></td> + <td style="font-family: monospace;">123456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">654321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis clip</code></td> + <td style="font-family: monospace;">…3456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis ellipsis</code></td> + <td style="font-family: monospace;">…34…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis '.'</code></td> + <td style="font-family: monospace;">…34.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' clip</code></td> + <td style="font-family: monospace;">,3456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' ellipsis</code></td> + <td style="font-family: monospace;">,34…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,43…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' '.'</code></td> + <td style="font-family: monospace;">,34.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,53.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Using_the_abbr_tag_of_HTML5_along_with_text-overflow"><br> + Using the abbr tag of HTML5 along with text-overflow</h3> + +<p>We have the example of the use of abbr tag inside a div with width 250px;</p> + +<pre class="brush: css">div { + width: 250px; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: ltr; +}</pre> + +<pre class="brush: html"><div> + <abbr title="https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow">https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow</abbr> +</div></pre> + +<p>The full path of the URL will be displayed over the mouse, and the screen will be printed as follows: https://developer.mozilla.org/pt-BR/...</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 UI', '#text-overflow', 'text-overflow') }}</td> + <td>{{ Spec2('CSS3 UI') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>A previous version of this interface reached the <em>Candidate Recommendation</em> status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the <em>Working Draft</em> level, explaining why browsers implemented this property unprefixed, though not at the CR state.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 (312.3)</td> + <td>{{ CompatGeckoDesktop("7.0") }} ({{ anch("Gecko notes", "See notes") }})</td> + <td>6.0 ({{ anch("Internet Explorer notes", "See notes") }})</td> + <td>9{{ property_prefix("-o") }} ({{ anch("Opera notes", "See notes") }})<br> + 11.0</td> + <td>1.3 (312.3)</td> + </tr> + <tr> + <td>Two-value syntax {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>String value{{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Two-value syntax {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>String value {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, handling of text-overflow on blocks with inline overflow on both horizontal sides has been corrected; previously, if you specified only one value (such as <code>text-overflow:ellipsis;</code>), ellipsing was happening on both sides instead of just the end edge based on the block's text direction.</p> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Internet Explorer 8 introduced the prefixed version, <code>-ms-text-overflow</code>, synonymous with <code>text-overflow</code>. Do not use this prefixed version.</p> + +<h3 id="Opera_notes">Opera notes</h3> + +<p>Opera 9 and 10 require the prefixed version, <code>-o-text-overflow</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li> + <li>Related CSS properties: {{ cssxref("overflow") }}, {{ cssxref("white-space") }}</li> +</ul> |