path: root/files/pt-br/web/css/text-overflow/index.html

---
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>&lt;string&gt;</code> {{ experimental_inline() }}</dt>
 <dd>The {{cssxref("&lt;string&gt;")}} 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">&lt;div&gt;
    &lt;abbr title="https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow"&gt;https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-overflow&lt;/abbr&gt;
&lt;/div&gt;</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">Compatibilidade com navegadores</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>